iconify (opens new window) 是一个图标库。集合了各大框架的图标,使用简单图标也比较多比较全。
vue2 本地维护图标示例
npm i @iconify/vue2
1
import { addIcon } from "@iconify/vue2";
/** 文档地址:https://iconify.design/docs/icon-components/vue2/
* 使用方案:本地维护 svg
* 使用方法:https://icon-sets.iconify.design/ 中复制 svg,使用 addIcon 方法绘制,
* 组件使用:<v-icon icon="home" color="blue" />
*/
const iconSvgs = [
{
name: "home",
options: {
body: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z"/></svg>
`,
},
},
];
export default function initLocalIcon() {
iconSvgs.forEach((i) => {
addIcon(i.name, i.options);
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22