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 globallyVue.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>
    

总结

到此这篇关于Vue中引入svg图标的两种方式的文章就介绍到这了,更多相关Vue引入svg图标内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
• vue引入Excel表格插件的方法
• Vue项目如何引入bootstrap、elementUI、echarts
• 如何在vue 中引入使用jquery
• Vue-cli4 配置 element-ui 按需引入操作
• vue 项目引入echarts 添加点击事件操作
• vue-cli3 引入 font-awesome的操作
• vue页面引入three.js实现3d动画场景操作
• 使用vue引入maptalks地图及聚合效果的实现
• 浅谈在vue-cli3项目中解决动态引入图片img404的问题
• Vue项目引入PWA的步骤

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！