Vue项目中使用图标的两种常用方式

1. 使用iconfont 集成到项目

• 访问iconfont官网，新建项目

• 添加图标到项目

• 下载iconfont文件到本地

• 创建vue项目，并在assets目录下新建icons/iconfont文件夹

• 将下载到本地的文件中.woff、.woff2、.ttf以及.css为后缀的文件添加到iconfont文件夹下

• 在main.js中引入css文件

  import './assets/icons/iconfont/iconfont.css'
  

• 使用class="iconfont + 图标class类名"

  <div>
      <i class="iconfont icon-eye-open"></i>
  </div>
  

2. 使用svg-icon

• 安装解析svg图标的依赖

  $ npm install svg-sprite-loader
  

• vue项目src/components下新建SvgIcon/index.vue文件

  • index.vue

    <template>
      <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners">
      <svg v-else="" :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName"></use>
      </svg>
    </div></template>
    
    <script>
    // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
    import { isExternal } from '@/utils/validate'
    export default {
      name: 'SvgIcon',
      props: {
        iconClass: {
          type: String,
          required: true
        },
        className: {
          type: String,
          default: ''
        }
      },
      computed: {
        isExternal() {
          return isExternal(this.iconClass)
        },
        iconName() {
          return `#icon-${this.iconClass}`
        },
        svgClass() {
          if (this.className) {
            return 'svg-icon ' + this.className
          } else {
            return 'svg-icon'
          }
        },
        styleExternalIcon() {
          return {
            mask: `url(${this.iconClass}) no-repeat 50% 50%`,
            '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
          }
        }
      }
    }
    </script>
    
    <style scoped="">
    .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    
    .svg-external-icon {
      background-color: currentColor;
      mask-size: cover!important;
      display: inline-block;
    }
    </style>
    

  • /utils/validate.js

    /**
     * @param {string} path
     * @returns {Boolean}
     */
    export function isExternal(path) {
      return /^(https?:|mailto:|tel:)/.test(path)
    }
    

• vue项目src/assets下新建icons/svg文件夹以及文件夹下index.js文件，svgo.yml文件

  • index.js

    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg component
    
    Vue.component('svg-icon', SvgIcon)
    
    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    
    

  • svgo.yml

    # replace default config
    
    # multipass: true
    # full: true
    
    plugins:
    
      # - name
      #
      # or:
      # - name: false
      # - name: true
      #
      # or:
      # - name:
      #     param1: 1
      #     param2: 2
    
    - removeAttrs:
        attrs:
          - 'fill'
          - 'fill-rule'
    

• svg文件夹下新建svg文件夹放入需要使用的svg图标文件

       

• 配置vue.config.js

  'use strict';
  const path = require('path');
  
  function resolve(dir) {
    return path.join(__dirname, dir);
  }
  
  module.exports = {
    chainWebpack(config) {
      // set svg-sprite-loader
      config.module
        .rule('svg')
        .exclude.add(resolve('src/assets/icons/svg'))   //与你自己的icons路径保持一致
        .end();
      config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/assets/icons/svg'))   //与你自己的icons路径保持一致
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end();
    }
  };
  
  

• main.js中引入svg

  import '@/assets/icons/svg/'
  

• 使用：<svg-icon icon-class="图标文件名称">

  <svg-icon icon-class="email">