Vue中引入svg圖示的方式

Vue中引入svg圖示的方式

Vue中引入svg圖示的方式一

安裝

yarn add svg-sprite-loader --dev

svg組件

index.vue

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

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

<style lang="less" scoped>
.svg-icon {
    width: 100px;
    height: 100px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

注冊到全域

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

// 注冊到全域
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

vue.config.js

module.exports = {
	chainWebpack: config => {
	   	config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
	}      
}

頁面中使用

<!-- svg-name為svg名 -->
<svg-icon svg-name="ic_home_news" />

Vue中引入svg圖示的方式二

• npm install svg-sprite-loader --save-dev

• vue.config.js中添加如下代碼

  const path = require('path');
  function resolve(dir) {
    // __dirname專案根目錄的絕對路徑
    return path.join(__dirname, dir);
  }
  module.exports = {
    chainWebpack: config => {
      const svgRule = config.module.rule('svg');
      // 清除已有的所有loader
      // 如果你不這樣做，接下來的loader會附加在該規則現有的loader之后
      svgRule.uses.clear();
      svgRule
        .test(/\.svg$/)
        .include.add(path.resolve(__dirname, './src/icons/svg'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        });
      const fileRule = config.module.rule('file');
      fileRule.uses.clear();
      fileRule
        .test(/\.svg$/)
        .exclude.add(path.resolve(__dirname, './src/icons/svg'))
        .end()
        .use('file-loader')
        .loader('file-loader');
    },
  }
  

• 建立如下的檔案目錄
  

  • SvgIcon.vue代碼

    <template>
      <svg :class="svgClass" xmlns="http://www.w3.org/2000/svg">
        <use :xlink:href="iconName" xmlns:xlink="http://www.w3.org/1999/xlink" />
      </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>
    

  • svg檔案夾下放svg圖示

  • index.js代碼

    import Vue from 'vue';
    import SvgIcon from '@/components/SvgIcon'; // svg組件
    // register globally
    Vue.component('svg-icon', SvgIcon);
    const req = require.context('./svg', false, /\.svg$/);
    const requireAll = requireContext => requireContext.keys().map(requireContext);
    requireAll(req);
    

• 最后在main.js中引入

  import './icons'; 
  

• 在頁面中使用svg

  icon-class是svg圖示名 class-name是你要自定義的class類名

  <svg-icon icon-class="features_ic_risk@1x" class-name="icon"></svg-icon>