vue 通过symbol的方式引入svg图标

vue 通过symbol的方式引入svg图标

把iconfont的项目下载到本地，只需要用到里面的iconfont.js这个文件 main.js

import './assets/iconfont'//引入iconfont.js

封装一个icon.vue组件： icon.vue

<template>
  <svg :class="iconStyle" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
  export default {
    name: 'icon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      iconStyle: String
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      }
    }
  }
</script>

组件中使用： demo.vue

<template>
    <div class="container">
        <iconSvg icon-style="style" icon-class="name"></iconSvg>
        <!-- style为icon样式，name为icon名字 -->
    </div?
</template>

<script>
import icon from '../components/icon'
export default{
    components: {
        'icon':icon
    },
}
</script>

<style>
.style{
    width: 2em; 
    height: 2em;
    vertical-align: -0.15em;
    fill: #bfcbd9;
    overflow: hidden;
}
</style>