Skip to content
A util to transform `iconfont.js` to `Iconfont.vue`
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
lib
.gitignore
.npmignore
.npmrc
LICENSE
Readme.md
package.json
yarn.lock

Readme.md

Iconfont to Vue

A util to transform iconfont.js to Iconfont.vue

介绍

Iconfont.cn 提供了 “Symbol 引用” 的 js 代码,但是个人不喜欢直接引入那个 iconfont.js 文件,更喜欢作为一个函数式组件 Iconfont.vue 引入到 Vue 项目中。所以简单通过字符串处理把 iconfont.js 转换为 Iconfont.vue,顺便把样式也加进去。

参考 Iconfont 帮助 - symbol 引用

使用方式

安装 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> 标签放在这个组件里也是可以的,这个就随意发挥了。

You can’t perform that action at this time.