Vue中引入svg图标的方式

时间:2021-1-18 作者:admin

Vue中引入svg图标的方式

Vue中引入svg图标的方式一

安装

yarn add svg-sprite-loader --dev

svg组件
Vue中引入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>

注册到全局
Vue中引入svg图标的方式
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');
      },
    }
    
  • 建立如下的文件目录
    Vue中引入svg图标的方式

    • 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>
    
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。