A util to transform
iconfont.js
toIconfont.vue
Iconfont.cn 提供了 “Symbol 引用” 的 js 代码,但是个人不喜欢直接引入那个 iconfont.js
文件,更喜欢作为一个函数式组件 Iconfont.vue
引入到 Vue 项目中。所以简单通过字符串处理把 iconfont.js
转换为 Iconfont.vue
,顺便把样式也加进去。
安装 iconfont-to-vue
:
npm install -g iconfont-to-vue
将 iconfont
下载至本地后,会得到这么一堆文件:
download
├── demo.css
├── demo_index.html
├── iconfont.css
├── iconfont.eot
├── iconfont.js # Symbol 引用的 js 文件
├── iconfont.svg
├── iconfont.ttf
├── iconfont.woff
└── iconfont.woff2
运行 iconfont-to-vue
进行转换:
iconfont-to-vue iconfont.js
# 或者用短一点的别名 itv
itv iconfont.js
# 自定义生成的文件名
iconfont-to-vue iconfont.js MyIconfont.vue
默认会生成 Iconfont.vue
:
<template functional>
<svg v-show="false">
<symbol
id="icon-github"
viewBox="0 0 1024 1024"
>
<path d="....." />
</symbol>
</svg>
</template>
<script>
export default {
name: 'Iconfont',
}
</script>
<style>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: #333;
overflow: hidden;
}
</style>
在项目最外层引入 Iconfont
组件,然后自行创建一个 Icon
组件来使用即可,例如:
<template>
<svg
class="icon"
:style="{ fill: color }"
>
<use :xlink:href="`#icon-${name}`" />
</svg>
</template>
<script>
export default {
name: 'Icon',
props: {
name: {
type: String,
required: true,
},
color: {
type: String,
required: false,
default: '#333',
},
},
}
</script>
当然,把 <style>
标签放在这个组件里也是可以的,这个就随意发挥了。