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新手入门指导教程
Nov 18 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
详解Vue的列表渲染
Nov 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php学习笔记之 函数声明
2011/06/09 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
laravel入门知识点整理
2020/09/15 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python计算一个序列的平均值的方法
2015/07/11 Python
详细分析python3的reduce函数
2017/12/05 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
电信营业员自我评价分享
2014/01/17 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
公司任命书模板
2014/06/06 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书