Vue中引入svg图标的两种方式


Posted in Vue.js onJanuary 14, 2021

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>

总结

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

Vue.js 相关文章推荐
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
vue 递归组件的简单使用示例
Jan 14 #Vue.js
vue element和nuxt的使用技巧分享
Jan 14 #Vue.js
vue动态设置路由权限的主要思路
Jan 13 #Vue.js
vue组件是如何解析及渲染的?
Jan 13 #Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 #Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 #Vue.js
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
详解Python传入参数的几种方法
2019/05/16 Python
一行python实现树形结构的方法
2019/08/09 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
庆元旦广播稿
2014/02/10 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2015年司法所工作总结
2015/04/27 职场文书
学校节水倡议书
2015/04/29 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
Python time库的时间时钟处理
2021/05/02 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python