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