1，缘由
最近在整理vue用到的东西，准备自己手搓一个脚手架出来。想着之前用过的 icon 方式，无非就ui框架自带的icon, 后来使用最多的iconfont, 之前看别的优秀的框架中使用到 Iconify，自己就想弄来试试。
2，iconify 描述
您可以使用许多开放源码图标集有一个很大的开放源码图标组件的选择。成千上万的高质量的图标, 所有的验证、清理、优化和总是最新的。
关于图标化项目的更多信息的访问： iconify.design/
访问 vue3 + iconify 文档地址： iconify.design/docs/icon-c…
3, 安装
npm install --save-dev @iconify/vue
yarn add --dev @iconify/vue
pnpm add @iconify/vue -D
4, 参数详解
icon, IconifyIcon|string icon name or icon data.
Optional properties:
inline, boolean changes vertical alignment.
width, string|number icon width.
height, string|number icon height.
hFlip, boolean flips icon horizontally.
vFlip, boolean flips icon vertically.
flip, string alternative to hFlip and vFlip.
rotate, number|string rotates icon.
color, string changes icon color.
onLoad, function is a callback that is called when icon data has been loaded. See below.
5，icon 名字组成
- provider：api 源，如果为空就是用公共api
- prefix : icon 图解到名字
- name: icon 名字
6, 使用
html 增加
<Icon icon="mdi-light:home"/>
<Icon icon="mdi-light:home" height="24" />
<Icon icon="mdi-light:home" height="2em" />
<Icon icon="mdi-light:home" height="auto" />
<Icon icon="mdi-light:home" :width="16" :height="16" />
<Icon icon="line-md:image-twotone" :inline="true" />
<Icon icon="eva:alert-triangle-fill" color="red" />
<Icon icon="eva:alert-triangle-fill" color="#f00" />
<Icon icon="eva:alert-triangle-fill" style="color: red;" />
<Icon icon="eva:alert-triangle-fill" :style="{color: 'red'}" />
<Icon icon="eva:alert-triangle-fill" :style="{color: '#f00'}" />
<Icon icon="eva:alert-triangle-fill" :h-flip="true" />
<Icon icon="eva:alert-triangle-fill" :horizontal-flip="true" />
<Icon icon="eva:alert-triangle-fill" flip="horizontal" />
<Icon icon="eva:alert-triangle-fill" :rotate="1" />
<Icon icon="eva:alert-triangle-fill" rotate="90deg" />
<Icon icon="eva:alert-triangle-fill" rotate="25%" />
js 中导入
import{ Icon }from'@iconify/vue';
