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的mixin策略
Nov 19 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue router 动态路由清除方式
May 25 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
Python映射拆分操作符用法实例
2015/05/19 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
儿童编程python入门
2018/05/08 Python
python实现黑客字幕雨效果
2018/06/21 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
黄河象教学反思
2014/02/10 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
爱心募捐通知范文
2015/04/27 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
Python中npy和mat文件的保存与读取
2022/04/24 Python