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

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

搭建环境

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

安装：npminstall--save-devsvg-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

!--aria-hidden,帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆)--

svgaria-hidden="true":width="size":height="size":fill="fillColor"

use:xlink:href="iconName"rel="externalnofollow"/use

/svg

/template

scriptlang="ts"

import{PropType,toRefs}from'vue'

exportdefault{

props:{

size:{

type:NumberasPropTypenumber,

default:14

fillColor:{

type:StringasPropTypestring,

default:'#000'

iconName:{

type:StringasPropTypestring,

required:true

setup(props:any){

const{size,fillColor,iconName:_iconName}=toRefs(props)

consticonName=`#${_iconName.value}`

return{

size,

fillColor,

iconName

/script

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

//index.ts

importSvgIconfrom'@/components/SvgIcon.vue'

import{App}from'vue'

exportdefault(app:App)={

ponent('svg-icon',SvgIcon)

constctx=require.context('./svg',false,/\.svg$/)

con