第基于Vue實現(xiàn)自定義組件的方式引入圖標(biāo)在項目開發(fā)中，使用圖標(biāo)的方式有很多種，可以在iconfont上面找到合適的圖標(biāo)，通過http或者直接下載使用，這里我分享一種通過實現(xiàn)自定義組件的方式引入圖標(biāo)。

搭建環(huán)境

這里通過@vue/cli4.5.13新建項目，并且需要安裝依賴svg-sprite-loader，用來處理對應(yīng)的svg圖標(biāo)，方便我們使用。

安裝：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下我們的自定義圖標(biāo)文件

通過svg-sprite-loader來處理自定義的圖標(biāo)文件，options里面的設(shè)置表示，生成的svg的symbolId為icon和文件名的拼接。

新建圖標(biāo)組件

在components目錄下新建一個SvgIcon.vue文件：

template

!--aria-hidden,幫助殘障人士閱讀(設(shè)備讀取內(nèi)容時會跳過這個標(biāo)簽以免混淆)--

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圖標(biāo)：

//index.ts

importSvgIconfrom'@/components/SvgIcon.vue'

import{App}from'vue'

exportdefault(app:App)={

ponent('svg-icon',SvgIcon)

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

con