基于Vue实现自定义组件的方式引入图标

前言

在项目开发中，使用图标的方式有很多种，可以在iconfont上面找到合适的图标，通过http或者直接下载使用，这里我分享一种通过实现自定义组件的方式引入图标。

搭建环境

这里通过@vue/cli 4.5.13新建项目，并且需要安装依赖svg-sprite-loader，用来处理对应的svg图标，方便我们使用。

安装： npm install --save-dev svg-sprite-loader

配置vue.config.js

在安装svg-sprite-loader后，新建vue.config.js来配置依赖：

// vue.config.js
const { resolve } = require(\'path\')

module.exports = {
  chainWebpack(config) {
    config
      .module
      .rule(\'svg\')
      .exclude
      .add(resolve(\'src/icons\'))
      .end()
    config
      .module
      .rule(\'icons\')
      .test(/\\.svg$/)
      .include
      .add(resolve(\'src/icons\'))
      .end()
      .use(\'svg-sprite-loader\')
      .loader(\'svg-sprite-loader\')
      .options({
        symbolId: \'icon-[name]\'
      })
  }
}

这里通过chainWebpack来做了两项配置：

第一个是让原来的其他处理svg的依赖不处理src/icons下我们的自定义图标文件
通过svg-sprite-loader来处理自定义的图标文件，options里面的设置表示，生成的svg的symbolId为icon和文件名的拼接。

新建图标组件

在components目录下新建一个SvgIcon.vue文件：

<template>
  <i class=\"icon\">
    <!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) -->
    <svg aria-hidden=\"true\" :width=\"size\" :height=\"size\" :fill=\"fillColor\">
      <use :xlink:href=\"iconName\" rel=\"external nofollow\" ></use>
    </svg>
  </i>
</template>

<script lang=\"ts\">
import { PropType, toRefs } from \'vue\'

export default {
  props: {
    size: {
      type: Number as PropType<number>,
      default: 14
    },
    fillColor: {
      type: String as PropType<string>,
      default: \'#000\'
    },
    iconName: {
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props: any) {
    const { size, fillColor, iconName: _iconName } = toRefs(props)
    const iconName = `#${_iconName.value}`

    return {
      size,
      fillColor,
      iconName
    }
  }
}
</script>

然后，新建一个icons目录，并且新建一个index文件，用来挂在组件和引入svg图标：

// index.ts
import SvgIcon from \'@/components/SvgIcon.vue\'
import { App } from \'vue\'

export default (app: App) => {
  app.component(\'svg-icon\', SvgIcon)
}

const ctx = require.context(\'./svg\', false, /\\.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)

requestAll(ctx)

// main.ts
import { createApp } from \'vue\'
import App from \'./App.vue\'
import installSvgIcon from \'@/icons/index\'

const app = createApp(App)

installSvgIcon(app)
app.mount(\'#app\')

这个文件做了两件事：

通过导出一个方法来挂载全局组件svg-icon；
通过require.context来实现自动化引入svg目录下的图标文件。

使用组件

首先，我们要在icons/svg目录下存放svg图标文件（在iconfont上找自己需要的）；

然后，就可以在其他地方使用啦：

<template>
  <img alt=\"Vue logo\" src=\"./assets/logo.png\">
  <svg-icon icon-name=\"icon-dashboard\"></svg-icon>
  <HelloWorld msg=\"Welcome to Your Vue.js + TypeScript App\"/>
</template>

直接通过组件svg-icon的方式引入，然后传入icon-name即可，icon-name的值由icon拼接svg文件名组成。

总结

这种自定义方式引入svg图标的方式，还是挺方便的，想要加上一个图标的时候，几步即可：

直接下载好svg文件放入对应目录中；
接着通过svg-icon组件来引入。

但是，修改样式时不能通过css来修改，这点就不太方便了。