vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)

更新時間：2023年04月22日 14:33:06 作者：全世界最好的李憨憨iu

這篇文章主要介紹了vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue封裝自己的Svg圖標組件庫

安裝及配置方法

一、安裝組件svg-sprite-loader

npm install svg-sprite-loader --save-dev      ||   yarn add svg-sprite-loader

二、在src/components下新建文件夾及文件SvgIcon/index.vue，index.vue添加如下內(nèi)容:

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    v-on="$listeners"
  />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" rel="external nofollow"  rel="external nofollow"  />
  </svg>
</template>

<script>
//導(dǎo)入公共方法,校驗傳入的iconClass是否為外部鏈接
//匹配http或者 https
import { isExternal } from '@/utils/validate'
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
  //匹配http或者 https
    isExternal () {
      return isExternal(this.iconClass)
    },
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon () {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

在src下新建utils/validate.js,定義公共的方法,用于校驗傳入的iconClass是否為外部鏈接,內(nèi)容如下:

//匹配http或者 https
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

三、在src下新建icons文件夾，及icons文件夾下svg文件夾、index.js文件，將svg圖片放入svg文件夾中,在 index.js文件中添加如下內(nèi)容

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg 組件

// 全局注冊svg組件
Vue.component('svg-icon', SvgIcon)
// 工程化導(dǎo)入svg圖片
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

四、在main.js中引入svg

import '@/icons' // icon

五、配置 vue.config.js(主要為打包進行設(shè)置)

const path = require('path')
// 將傳入的相對路徑轉(zhuǎn)換成絕對路徑
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack (config) {
    // set svg-sprite-loader
    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]'
      })
      .end()
  }

}

六、在組件中使用

 <div>
      <svg-icon icon-class="user" />//傳入svg文件名稱
      <svg-icon icon-class="password" />
    </div>

vue使用svg封裝圖標組件，代替img圖片提高性能

可行性分析

如何在vue中使用svg封裝圖標組件，代替img圖片提高性能。

1：配置：svg-sprite-loader
2：自定義 svg-icon組件
3：導(dǎo)出.svg模塊

目錄介紹

|-src  
|-main.js  
|-icons  
|-svg  
|-user.svg  
|-psd.svg  
|-index.js  
|-SvgIcon.vue  
|-vue.config.js

說明

為了讓字體圖標模塊成為，獨立于組件，獨立于項目的模塊

1：優(yōu)點：在任意的項目中都可以引用。需要什么圖標下載獨贏svg就可以了
2：未完成：整個常見圖標，發(fā)布npm 提供給更多的開發(fā)者使用
3: 注意：如果在組件庫中，不能使用vue.config.js 使用打包工具配置文件

1. 使用說明

<svg-icon iconClass="user" className="use" />  
  
<style>  
.use{  
font-size:100px;  
}  
</style>

屬性	類型是否必填	作用
iconClass	string\|必填	設(shè)置使用哪個圖片，值為.svg文件名
className	string\|非必填	自定義圖標樣式

實踐方案

封裝SvgIcon組件

  
<template>  
  
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">  
  
      <!-- xlink:href=#dl-icon-lqz -->  
  
    <use :xlink:href="iconName" rel="external nofollow"  rel="external nofollow"  />  
  
  </svg>  
  
</template>  
  
  
  
<script>  
  
export default {  
  
  name: "SvgIcon",  
  
  props: {  
  
    iconClass: {  
  
      type: String,  
  
      required: true,  
  
    },  
  
    className: {  
  
      type: String,  
  
      default: "",  
  
    },  
  
  },  
  
  computed: {  
  
    svgClass() {  
  
      if (this.className) {  
  
        return `svg-icon ${this.className}`;  
  
      }  
  
      return "svg-icon";  
  
    },  
  
    iconName() {  
  
      return `#dl-icon-${this.iconClass}`;  
  
    },  
  
  },  
  
};  
  
</script>  
  
  
  
<style scoped>  
  
.svg-icon{  
  
  width: 1em;  
  
  height: 1em;  
  
  fill: currentColor;  
  
  overflow: hidden;  
  
}  
  
  
  
</style>

1. 準備好對應(yīng)的svg文件

去阿里圖標庫下載需要的svg文件，一個圖標一個svg文件并放在 src/icon/svg目錄下

阿里圖標鏈接地址](https://www.iconfont.cn/))

2. 配置.svg模塊

2.1 安裝：svg-sprite-loader

npm i svg-sprite-loader -D

2.2 vue.config.js中配置svg-sprite-loader

//vue.config.js  
  
const path = require('path');  
  
// 在vue.config.js中沒有配置 resolve 方法， 需要自定義一個  
  
function resolve(dir) {  
  
  return path.join(__dirname, dir);  
  
}  
  
module.exports = {  
  
  chainWebpack: (config) => {  
  
    config.module.rules.delete('svg'); // 重點:刪除默認配置中處理svg  
  
    config.module  
  
      .rule('svg-sprite-loader') // rule 匹配規(guī)則  
  
      .test(/\.svg$/) // 用正則匹配 文件  
  
      .include  // 包含 包括  
  
      .add(resolve('src/icon')) // 處理svg目錄  
  
      .end()  
  
      .use('svg-sprite-loader')   // 配置loader  use() 使用哪個loader  
  
      .loader('svg-sprite-loader')// 加載loader  
  
      .options({  
  
        // [name] 變量。一般表示匹配到的文件名 xxx.svg  
  
        // 注意： symbolId  在  <use xlink:href="#dl-icon-svg文件名" rel="external nofollow"  />  
  
        symbolId: 'dl-icon-[name]', // 將所有的.svg 集成到 symbol中，當(dāng)使用 類名 icon-文件名  
  
      });  
  
  },  
  
};

3. 導(dǎo)出所有.svg 注冊組件

// index.js ?
??
// 引入vue ?
??
import Vue from 'vue'; ?
??
// 引入svgIcon組件 ?
??
import SvgIcon from './SvgIcon.vue'; ?
??
// 注冊為全局組件 ?
??
Vue.component('svg-icon', SvgIcon); ?
??
// 引入當(dāng)前svg目錄下的文件、不遍歷子目錄、匹配以'.svg'為結(jié)尾的文件 ?
??
/** ?
??
?* webpack 是模塊化打包工具 ?
??
?* require.context() ?返回上下文構(gòu)造函數(shù)webpackContext。存放了所有匹配到的模塊信息 ?
??
?* 參一：設(shè)置配置模塊目錄 ?
??
?* 參二：表示是否匹配子目錄 true 匹配 false 不匹配 ?
??
?* 參三：正則， 匹配文件的正則表達式。 ?
??
?* ?
??
?* webpackContext.keys() 返回所有匹配到模塊的文件地址 【集合】 ?
??
?*/ ?
??
const webpackContext = require.context('./svg', false, /\.svg$/); ?
??
??
??
// // 相當(dāng)于 req.keys().forEach(key => req(key)), req.keys()是匹配到的svg文件的路徑數(shù)組 ?
??
const requireAll = (requireContext) => { ?
??
? ? // requireContext.keys() ? 匹配的 文件路徑數(shù)組 ?
??
? ? return requireContext.keys().map(requireContext) ?
??
}; ?
??
// // 得到一個完整解析的module數(shù)組 ?
??
requireAll(webpackContext); ?
??
??
??
// 實現(xiàn):webpackApi方式自動化導(dǎo)入模塊，代替 import...from方式```
??

運行icon/index.js