Vue中引入svg图标的方式

Vue中引入svg图标的方式

Vue中引入svg图标的方式一

安装

yarn add svg-sprite-loader --dev

svg组件

index.vue

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

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