VUE-cli3使用 svg-sprite-loader

時間 2019-11-16

標籤 vue cli3 cli 使用 svg sprite loader 简体版

原文原文鏈接

svg-sprite-loader 的插件，用來根據導入的 svg 文件自動生成 symbol 標籤並插入 html，接下來就能夠在模版中方便地使用 svg-sprite 技術了。html

使用 svg-sprite 的好處

若是不知道 svg-sprite 是什麼，能夠參考大神張鑫旭的文章：將來必熱：SVG Sprite技術介紹webpack

頁面代碼清爽
可以使用 ID 隨處重複調用
每一個 SVG 圖標均可以更改大小顏色

安裝插件

npm install svg-sprite-loader --save-dev複製代碼

webpack 配置,在Vue.config.js加入處理 svg 的 loader：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); //重點:刪除默認配置中處理svg,
    //const svgRule = config.module.rule('svg')
    //svgRule.uses.clear()
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/icons')) //處理svg目錄
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
  configureWebpack: () => ({
    // resolve: {
    //   alias: require('./alias.config').webpack
    // }
    // module: {
    //   rules: [{
    //     test: /\.svg$/,
    //     use: [{
    //       loader: "svg-sprite-loader",
    //       options: {
    //         symbolId: 'icon-[name]'
    //       }
    //     }]
    //   }]
    // }
  })
}
複製代碼

這時候發現仍是不行啊，body 中並無看到 symbol 標籤。git

就是說只有咱們本身引入的 svg 文件須要通過 svg-sprite-loader，那麼就將這些 svg 統一放到一個目錄下，我這裏放到了 src/iconsgithub

而後要在用到的地方引入須要的svgweb

import './src/icon/target.svg';複製代碼

從新啓動項目，終於在 html 中看到了 symbol 標籤！npm

配置好了，就能夠用了。使用方法很簡單，相較於原來插入 svg 圖標的方法（img src 或將 svg 整個寫入 html），用 svg-sprite 更加簡單且清爽：bash

1
複製代碼

<svg><use xlink:href="#target" /></svg>
複製代碼

嗯，就這樣短短一行。xlink:href 中傳入 svg ID 就行了，因爲在上面的配置文件中咱們直接使用文件名做爲 symbol 的 ID，因此這裏傳入的 ID 即爲你想顯示的圖標的 svg 文件名，記得加上 #。svg

自動導入

你會發現，這裏要想插入某個圖標，都得 import，每用一個都要重複一遍這個流程，太麻煩，那麼咱們就讓 src/icons/svg/下的 svg 文件都自動導入吧。wordpress

webpack 能夠幫咱們作到：ui

// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);

// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);複製代碼

代碼實例:

首先在main.ts中引入import './icons/index',

icons/index.js,將icons/svg中的全部svg導入並註冊全局組件SvgIcon

//SvgIcon組件代碼

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

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