vue3.0自定义字体图标使用

以往方法：

在Iconfont官网中搜索所需图标
添加入库
添加至项目
下载素材至本地
页面中引入字体文件
使用方法：

<i class="iconfont user-icon"></i>

缺点：项目想要添加新的图标时，需要重复上述操作并重新下载覆盖文件

手动分割线

解决方案：采用svg-sprite-loader自动加载打包，方便维护

// 项目默认配置文件
|-- vue3.0-project
  |-- node_modules
  |-- public
  |-- src
   |- - assets
    |-- components
    |-- icons
    |-- views
    |--App.vue
    |--main.js
 |-- .gitignore
 |-- babel.config.js
 |-- package-lock.json
 |-- package.json
 |-- README.en.md
 |-- README.md
 |-- vue.config.js

一、安装依赖 svg-sprite-loader

$ cnpm install svg-sprite-loader -D

二、vue.config.js配置

1、引入path模块，处理文件路径

const path = require('path')

// 获取绝对路径
function resolve(dir) {
  return path.join(__dirname, dir)
}

2、配置规则

module.exports = {
  // 链式webpack配置
  chainWebpack(config) {
    // svg规则配置，排除icons目录
    config.module.rule('svg')
    .exclude.add(resolve('src/icons'))
    .end()

    // 新增icons规则，设置svg-sprite-loader
    config.module.rule('icons') // 创建规则 ‘icons’
    .test(/\.svg$/) // 检测的具体目录
    .include.add(resolve('src/icons')) // 只考虑‘src/icons’目录下
    .end()
    .use('svg-sprite-loader') // 运用
    .loader('svg-sprite-loader') // 指定loader
    .options({ symbolId: 'icon-[name]' }) // 选项配置，将来使用图标的名称, 例：icon-qq
  }
}

查看所有规则

$ vue inspect --rules

[
  'vue',
  'images',
  'svg',
  'media',
  'fonts',
  'pug',
  'css',
  'postcss',
  'scss',
  'sass',
  'less',
  'stylus',
  'js',
  'eslint',
  'icons'
]

查看当前配置的icons规则

$ vue inspect --rule icons

/* config.module.rule('icons') */
{
  test: /\.svg$/,
  include: [
    'E:\\Code\\gitee\\vue3.0-project\\src\\icons'
  ],
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]'
      }
    }
  ]
}

三、编写svg-icon组件（src\components\SvgIcon.vue）

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if(this.className) {
        return 'svg-icon' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
/* 自定义默认图标样式 */
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

四、配置icon文件及目录（src\icons）

svg图标文件放置src\icons\svg下（每次新增文件，只需将svg文件放置该文件下即可，无需重复配置）

例：src\icons\svg\qq.svg

全局组件注册，icons规则匹配（src\icons\index.js）

import Vue from 'vue'

// 导入svgIcon组件
import SvgIcon from '@/components/SvgIcon'

// 全局注册svg-icon组件
Vue.component('svg-icon', SvgIcon)

// require.context 指定规则匹配
const req = require.context('./svg', false, /\.svg$/)

// keys =》 ['qq.svg', 'wx.svg']
req.keys().map(req)

五、全局引入icon配置文件（src\main.js）

// src\icons\index.js
import './icons'

六、使用

<svg-icon icon-class="qq"></svg-icon>
<svg-icon icon-class="wx"></svg-icon>

最后编辑于：2019.07.12 23:18:01