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+iview分页组件的封装
Nov 17 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue Element plus使用方法梳理
Dec 24 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python打开windows应用程序的实例
2019/06/28 Python
Python底层封装实现方法详解
2020/01/22 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
自荐信怎么写
2015/03/04 职场文书
2016党员入党决心书
2015/09/22 职场文书
2019旅游导游工作总结
2019/06/27 职场文书