如何在Vue中使用IconFont

图标

IconFont提供了三种本地使用方式Unicode、Font Class 和 Symbol，其中Unicode和Font Class本质上使用的是字体，所以不支持多色图标(有兴趣的可以自行百度一下)。svg的symbol的提供了类似雪碧图的功能，支持多色图标，也可以通过font-size、font-weight等调整样式。 zhuanlan.zhihu.com/p/484622368

1. 首先在IconFont矢量图标库中将需要的图标添加到项目中，并将其下载到本地并解压；

2. 在Vue项目中src/assets文件夹下新建iconfont文件夹，并将下载的文件中的iconfont.js放入其中；

3. 新建一个IconSvg.vue的组件

   <template>
       <svg class="svg-icon" aria-hidden="true">
           <use :xlink:href="iconName"></use>
       </svg>
   </template>
   
   <script>
   export default {
     name: 'IconSvg',
     props: {
       iconname: {
         type: String,
         required: true
       }
     },
     computed: {
       iconName() {
         return `#${this.iconname}`
       }
     }
   }
   </script>
   
   <style>
   .svg-icon {
       width: 1em;
       height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
   }
   </style>
   

4. 在main.js文件中引入iconfont.js并定义全局组件IconSvg.vue

   import '@/assets/iconfont/iconfont.js';
   import SvgIcon from '@/views/components/IconSvg.vue'
   Vue.component('svg-icon', SvgIcon);
   

5. 可以直接使用

   <svg-icon :iconname="图标名字"></svg-icon>
   

字体

iconfont同样提供了字体的使用，可以直接在线使用，也可以下载字体包。

1. 选择需要的字体，下载其字体包并解压

2. 将解压后的.ttf类型放在src/assets文件夹下

3. 在styles文件夹下新建一个font.css

    @font-face {
      /* 重命名字体名 */
      font-family: 'ZhanKuKu';
      /* 引入字体 */
      src: url('@/assets/iconfont/ZCOOL_KuHei_Regular.ttf');
      font-weight: normal;font-style: normal;
    }
   

4. 在main.js文件中引入font.css

    import '@/styles/font.css'
   

5. 直接使用

    <style>
      .font {
        font-family: 'ZhanKuKu';
      }
    </style>