基于Vue實(shí)現自定義組件的方式引入圖標

前言

在項目開(kāi)發(fā)中，使用圖標的方式有很多種，可以在上面找到合適的圖標，通過(guò)http或者直接下載使用，這里我分享一種通過(guò)實(shí)現自定義組件的方式引入圖標。

搭建環(huán)境

這里通過(guò)@vue/cli 4.5.13新建項目，并且需要安裝依賴(lài)svg-sprite-loader，用來(lái)處理對應的svg圖標，方便我們使用。

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

配置vue.config.js

在安裝svg-sprite-loader后，新建vue.config.js來(lái)配置依賴(lài)：

// 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]'
      })
  }
}

這里通過(guò)chainWebpack來(lái)做了兩項配置：

• 第一個(gè)是讓原來(lái)的其他處理svg的依賴(lài)不處理src/icons下我們的自定義圖標文件
• 通過(guò)svg-sprite-loader來(lái)處理自定義的圖標文件，options里面的設置表示，生成的svg的symbolId為icon和文件名的拼接。

新建圖標組件

在components目錄下新建一個(gè)SvgIcon.vue文件：

<template>
  <i class="icon">
    <!-- aria-hidden, 幫助殘障人士閱讀(設備讀取內容時(shí)會(huì )跳過(guò)這個(gè)標簽以免混淆) -->
    <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>

然后，新建一個(gè)icons目錄，并且新建一個(gè)index文件，用來(lái)掛在組件和引入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')

這個(gè)文件做了兩件事：

1. 通過(guò)導出一個(gè)方法來(lái)掛載全局組件svg-icon；
2. 通過(guò)require.context來(lái)實(shí)現自動(dòng)化引入svg目錄下的圖標文件。

使用組件

首先，我們要在icons/svg目錄下存放svg圖標文件（在上找自己需要的）；

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

<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>

直接通過(guò)組件svg-icon的方式引入，然后傳入icon-name即可，icon-name的值由icon拼接svg文件名組成。

總結

這種自定義方式引入svg圖標的方式，還是挺方便的，想要加上一個(gè)圖標的時(shí)候，幾步即可：

1. 直接下載好svg文件放入對應目錄中；
2. 接著(zhù)通過(guò)svg-icon組件來(lái)引入。

但是，修改樣式時(shí)不能通過(guò)css來(lái)修改，這點(diǎn)就不太方便了。

到此這篇基于Vue實(shí)現自定義組件的方式引入圖標的文章就介紹到這了,更多相關(guān)Vue自定義的圖標組件內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！