Skip to content
On this page

Svg Icon 图标

使用 svg 的图标库

使用之前

在使用 svg-icon 组件之前,需要先进行安装

shell
# pnpm
pnpm add --save-dev @fighting-design/fighting-icon

# npm
npm i --save-dev @fighting-design/fighting-icon

# yarn
yarn add --save-dev @fighting-design/fighting-icon

你需要注意

  • svg-icon 同时支持 icon 配置项和默认插槽来实现 icon 的展示,但 icon 配置项的优先级高于插槽
  • Fighting Design 内部其它一切依赖 svg-icon 的所有组件,都依赖这个规则

贡献

Fighting Design 使用 icones 作为图标库,如下面图表满足不了当前的需求,可进行贡献,贡献指南参考 CONTRIBUTING.md

基本使用

f-svg-icon 需要插入一个 svg

colorsize 属性可分别对于颜色和字体大小进行配置

它同时支持 icon 属性传递和插槽

开启

集合

svg-icon 集合,点击即可直接复制,共收入 266 个图标

FIconAnchor
FIconApps
FIconAppsMinus
FIconAppsPlus
FIconArchive
FIconArrowDown
FIconArrowDownLeft
FIconArrowDownRight
FIconArrowLeft
FIconArrowRight
FIconArrowUp
FIconArrowUpLeft
FIconArrowUpRight
FIconAtSign
FIconAtom
FIconBell
FIconBellSlash
FIconBin
FIconBinary
FIconBlock
FIconBluetooth
FIconBluetoothConnected
FIconBluetoothSearching
FIconBluetoothSlash
FIconBook
FIconBookOpen
FIconBookmark
FIconBriefcase
FIconBug
FIconCalendar
FIconCamera
FIconCameraVideo
FIconCameraVideoSlash
FIconCandy
FIconCards
FIconCast
FIconCertificate
FIconChartBar
FIconChartLine
FIconChevronDown
FIconChevronLeft
FIconChevronRight
FIconChevronUp
FIconChevronsDown
FIconChevronsLeft
FIconChevronsRight
FIconChevronsUp
FIconChevronsUpDown
FIconChip
FIconCircle
FIconCircleCross
FIconCircleMinus
FIconCircleTick
FIconCircleWarning
FIconClipboard
FIconClipboardTick
FIconClock
FIconClockAlarm
FIconClockTime
FIconCloud
FIconClover
FIconCode
FIconCoffee
FIconCog
FIconCompass
FIconConicalFlask
FIconContainer
FIconCopy
FIconCopyleft
FIconCopyright
FIconCreditcard
FIconCrop
FIconCross
FIconCrosshair
FIconCube
FIconDatabase
FIconDiamond
FIconDiff
FIconDisc
FIconDownload
FIconDroplet
FIconEraser
FIconExtensions
FIconEye
FIconEyeOffOutline
FIconEyeOutline
FIconEyeSlash
FIconFaceFrown
FIconFaceNeutral
FIconFaceSmile
FIconFile
FIconFileBinary
FIconFileCode
FIconFileSymlink
FIconFiles
FIconFilter
FIconFlag
FIconFlame
FIconFloppyDisk
FIconFolder
FIconFolderSymlink
FIconFolders
FIconForward
FIconFullSharp
FIconGamepad
FIconGem
FIconGift
FIconGitBranch
FIconGitCherryPick
FIconGitCompare
FIconGitFork
FIconGitMerge
FIconGitRequest
FIconGitRequestCross
FIconGitRequestDraft
FIconGitcommit
FIconGithub
FIconGitlab
FIconGlobe
FIconGrabHorizontal
FIconGrabVertical
FIconGraduateCap
FIconHash
FIconHeadphones
FIconHeart
FIconHelp
FIconHexagon
FIconHome
FIconHourglass
FIconId
FIconImage
FIconInbox
FIconInfinity
FIconInfo
FIconKey
FIconLaptop
FIconLayoutColumns
FIconLayoutDashboard
FIconLayoutGrid
FIconLayoutList
FIconLayoutRows
FIconLayoutSidebar
FIconLayoutStackH
FIconLayoutStackV
FIconLightbulb
FIconLightningBolt
FIconLink
FIconLinkExternal
FIconLinkSlash
FIconLoadingA
FIconMail
FIconMap
FIconMapOin
FIconMediaBack
FIconMediaEject
FIconMediaFastForward
FIconMediaPause
FIconMediaPlay
FIconMediaRewind
FIconMediaSkip
FIconMenuHamburger
FIconMenuKebab
FIconMenuMeatball
FIconMessage
FIconMessages
FIconMicrophone
FIconMinus
FIconMobile
FIconMonitor
FIconMonitorArrow
FIconMonitorCross
FIconMoon
FIconMusic
FIconNewspaper
FIconNorthStar
FIconNotes
FIconNotesCross
FIconNotesTick
FIconNut
FIconOctagon
FIconOctagonWarning
FIconOrganization
FIconPackage
FIconPadlock
FIconPaperPlane
FIconPaperclip
FIconPencil
FIconPeople
FIconPerson
FIconPhone
FIconPhoneCall
FIconPhoneCross
FIconPhoneForward
FIconPhoneIncoming
FIconPhoneOutgoing
FIconPin
FIconPlantPot
FIconPlus
FIconPower
FIconPrinter
FIconPulse
FIconRefresh
FIconReply
FIconRobot
FIconRocket
FIconRotateAntiClockwise
FIconRotateClockwise
FIconScales
FIconScreenMaxiMise
FIconScreenMiniMise
FIconSearch
FIconServer
FIconShare
FIconShield
FIconShieldCross
FIconShieldKeyhole
FIconShieldTick
FIconShieldWarning
FIconShoppingBag
FIconSignIn
FIconSignOut
FIconSignpost
FIconSkull
FIconSmileLine
FIconSnowflake
FIconSoundDown
FIconSoundMute
FIconSoundUp
FIconSpeaker
FIconSquare
FIconSquareCross
FIconSquareTick
FIconStack
FIconStackPop
FIconStackPush
FIconStar
FIconStarB
FIconStickyNote
FIconSun
FIconSwapHorizontal
FIconSwapVertical
FIconSword
FIconSwords
FIconTablet
FIconTag
FIconTelescope
FIconTent
FIconTerminal
FIconThumbDown
FIconThumbUp
FIconTick
FIconTickDouble
FIconTicket
FIconTreeFir
FIconTriangle
FIconTrophy
FIconUmbrella
FIconUpload
FIconWarning
FIconWifi
FIconWifiFair
FIconWifiPoor
FIconWifiSlash
FIconWifiWarning
FIconZoomIn
FIconZoomOut

Attributes

参数说明类型可选值默认值
coloricon 颜色string————
sizeicon 大小string / number————
iconicon 内容FightingIcon————
on-click点击触发的回调HandleMouse————

Slots

名称说明
defaulticon 的内容

Interface

组件导出以下类型定义:

ts
import type { SvgIconInstance, SvgIconProps } from 'fighting-design'

Contributors