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

Posted on by

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

安裝及配置方法

一、安裝組件svg-sprite-loader

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

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

<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>
//導入公共方法,校驗傳入的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是否為外部鏈接,內容如下:

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

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

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

// 全局註冊svg組件
Vue.component('svg-icon', SvgIcon)
// 工程化導入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(主要為打包進行設置)

const path = require('path')
// 將傳入的相對路徑轉換成絕對路徑
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：導出.svg模塊

目錄介紹

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

說明

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

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

1. 使用說明

<svg-icon iconClass="user" className="use" />  
  
<style>  
.use{  
font-size:100px;  
}  
</style>
屬性 類型是否必填 作用
iconClass string|必填 設置使用哪個圖片，值為.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. 準備好對應的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 匹配規則  
  
      .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中，當使用 類名 icon-文件名  
  
      });  
  
  },  
  
};

3. 導出所有.svg 註冊組件

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

運行icon/index.js

// msin.js  
import '@/icon/inde.js'  

接下來就可以使用 svg-icon圖標組件瞭

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：