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 组件注册全解析
Dec 17 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue elementUI表格控制对应列
Apr 13 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学习笔记之三 数据库基本操作
2011/01/17 PHP
php中通过Ajax如何实现异步文件上传的代码实例
2011/05/07 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
浅析is_writable的php实现
2013/06/18 PHP
smarty中post用法实例
2014/11/28 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
对python中return和print的一些理解
2017/08/18 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python操作MySQL数据库的方法
2018/06/20 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python爬取新型冠状病毒“谣言”新闻进行数据分析
2020/02/16 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
企业授权委托书范本
2014/09/22 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书