Skip to content

Icon 图标

语义化的矢量图形。使用图标组件,你需要安装 @azong/icons-vue
图标组件包:来源于:https://feathericons.com/

安装方式

js
npm install @azong/icons-vue --save

注册所有图标

js
// main.ts 引入图标库
import * as AzongIcons from '@azong/icons-vue'

// Vue实例
const app = createApp(App)

// 循环图标,使用component对象注入
for (const [key, component] of Object.entries(AzongIcons)) {
  app.component(key, component)
}

基本用法

尺寸

System

  • Plus
  • Minus
  • PlusCircle
  • MinusCircle
  • PlusSquare
  • MinusSquare
  • Bell
  • BellOff
  • Calendar
  • Clock
  • Check
  • CheckCircle
  • CheckSquare
  • XCircle
  • XOctagon
  • XSquare
  • X
  • Compass
  • MapPin
  • Map
  • Copy
  • DownloadCloud
  • Download
  • Edit
  • Edit2
  • Edit3
  • ExternalLink
  • Eye
  • EyeOff
  • Image
  • Link
  • Link2
  • Loader
  • Link
  • Lock
  • Unlock
  • LogIn
  • LogOut
  • Mail
  • Maximize
  • Maximize2
  • Minimize
  • Minimize2
  • List
  • Menu
  • Trash
  • Trash2
  • MoreHorizontal
  • MoreVertical
  • Paperclip
  • Power
  • Printer
  • RefreshCcw
  • RefreshCw
  • RotateCcw
  • RotateCw
  • Save
  • Search
  • Settings
  • Share
  • Share2
  • Shield
  • ShieldOff
  • ZoomIn
  • ZoomOut
  • AlertCircle
  • AlertTriangle
  • AlertFill
  • BellFill
  • CheckFill
  • HelpCircleFill
  • InfoFill
  • MinusCircleFill
  • PlusCircleFill
  • XCircleFill

Arrow

  • ArrowDownCircle
  • ArrowLeftCircle
  • ArrowUpCircle
  • ArrowRightCircle
  • ArrowDown
  • ArrowDownLeft
  • ArrowDownRight
  • ArrowLeft
  • ArrowRight
  • ArrowUpLeft
  • ArrowUpRight
  • ArrowUp
  • ChevronDown
  • ChevronLeft
  • ChevronRight
  • ChevronUp
  • ChevronsDown
  • ChevronsLeft
  • ChevronsRight
  • ChevronsUp
  • CornerDownLeft
  • CornerDownRight
  • CornerLeftDown
  • CornerLeftUp
  • CornerRightDown
  • CornerRightUp
  • CornerUpLeft
  • CornerUpRight