vue2.x封装svg组件并使用

第一步:安装svg-sprite-loader插件

<!-- svg-sprite-loader svg雪碧图 转换工具 -->
<!-- <symbol> 元素中的 path 就是绘制图标的路径,这种一大串的东西我们肯定没办法手动的去处理,
那么就需要用到插件 svg-sprite-loader 帮助我们处理图标。此插件就是将 .svg 文件自动生成 <symbol>元素并插入进 <svg> 标签内,通过插件的处理就可以很方便解决生成<symbol> 图形模板对象的问题。-->
<!--安装-->
npm install -S svg-sprite-loader
yarn add --dev svg-sprite-loader

第二步:封装svg组件

<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="iconName" /></svg>
</template><script>
export default {name: "SvgIcon",props: {iconClass: {type: String,required: true,},},computed: {iconName() {return `#icon-${this.iconClass}`;},},
};
</script><style scoped>
/*此处为所有图标默认显示样式*/
.svg-icon {width: 30px;height: 30px;fill: currentColor;overflow: hidden;
}
</style>

第三步:将需要的svg图标放入目录中

image.png

第四步:配置

可在webpack.config.js或vue.config.js中配置,若项目根目录下没有vue.config.js,则手动创建一个vue.config.js,将下列代码直接粘贴进去即可

const path = require('path')
const webpack = require('webpack')function resolve (dir) {return path.join(__dirname, dir)
}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()}
}

第五步:全局注册

在icons目录中创建index.js文件

  index.js中内容如下

import Vue from 'vue'
import SvgIcon from '../../components/svgIcon'// svg component// 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 './assets/icons/index'

第七步:使用

代码如下:

<!-- icon-class的值对应的是目录中svg的名字 -->
<svg-icon icon-class="user" />
<svg-icon icon-class="advert" color='#27ac3d'/>
<svg-icon icon-class="brand" color='red'/>

效果如下

 注意:若未显示出图标请重新运行项目。

运行后如果还未显示请检查相应地方的引入路径是否正确,尤其是vue.config.js中的路径。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/117554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

福建三明大型工程机械3D扫描测量工程零件开模加工逆向抄数-CASAIM中科广电

高精度3D扫描测量技术已经在大型工件制造领域发挥着重要作用&#xff0c;可以高精度高效率实现全尺寸三维测量&#xff0c;本期&#xff0c;CASAIM要分享的应用是大型工程机械3D扫描测量案例。 铣轮是深基础施工领域内工法先进、技术复杂程度高、高附加值的地连墙设备&#xff…

基于QT的图书管理系统

获取代码&#xff1a; 知识付费时代&#xff0c;低价有偿获取代码&#xff0c;请理解&#xff01; (1) 下载链接: 后发(2) 添加博主微信获取&#xff08;有偿&#xff09;,备注来源: mryang511688(3) 快速扫码咨询&#xff1a; 项目描述 技术&#xff1a;C、QT等 摘要&#…

YOLOv5 添加 OTA,并使用 coco、CrowdHuman数据集进行训练。

YOLO-OTA 第一步&#xff1a;拉取 YOLOv5 的代码第二步&#xff1a;添加 ComputeLossOTA 函数第二步&#xff1a;修改 train 和 val 中损失函数为 ComputeLossOTA 函数1、在 train.py 中 首先添加 ComputeLossOTA 库。2、在 train.py 修改初始化的损失函数3、在 train.py 修改一…

【2024秋招】2023-10-9 同花顺后端笔试题

1 Hashmap mp new hashmap&#xff08;50&#xff09;的大小扩充了几次 初时应该就给了这么多空间&#xff0c;在不考虑添加元素&#xff0c;所以扩容为0次 2 算数表达式的中缀为ab*c-d/e&#xff0c;后缀为abc*de/-&#xff0c;前缀是&#xff1f; 3 50M电信带宽&#xff…

【Java】泛型通配符

类型通配符 类型通配符<?> 一般用于接受使用&#xff0c;不能够做添加List<?>&#xff1a;表示元素类型未知的list&#xff0c;它的元素可以匹配任何类型带通配符的List仅表示它是各种泛型List的父类&#xff0c;并不能把元素添加到其中类型通配符上限&#xff1…

黑豹程序员-架构师学习路线图-百科:API接口测试工具Postman

文章目录 1、为什么要使用Postman&#xff1f;2、什么是Postman&#xff1f; 1、为什么要使用Postman&#xff1f; 目前我们开发项目大都是前后端分离项目&#xff0c;前端采用h5cssjsvue基于nodejs&#xff0c;后端采用java、SpringBoot、SSM&#xff0c;大型项目采用SpringC…

【C语言】实现通讯录管理系统

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家实现通讯录&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一. 前言二. 通讯录的实现2.1 写出基本框架2.2 制作menu菜单2.3 创建联系人和通讯录结构体2.4 …

LSM Tree 深度解析

我们将深入探讨日志结构合并树&#xff0c;也称为LSM Tree&#xff1a;这是许多高度可扩展的NoSQL分布式键值型数据库的基础数据结构&#xff0c;例如Amazon的DynamoDB、Cassandra和ScyllaDB。这些数据库的设计被认为支持比传统关系数据库更高的写入速率。我们将看到LSM Tree如…

驱动开发4 使用字符设备驱动的分步实现编写LED驱动(LED亮灯)

一、思维导图 二、通过字符设备驱动的分步实现编写LED驱动&#xff0c;另外实现特备文件和设备的绑定 应用程序 test.c #include<stdlib.h> #include<stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <sys/ioctl.h> #include…

【python】接入MySQL实际操作案例

Python程序接入MySQL数据库 文章目录 Python程序接入MySQL数据库建库建表接入MySQL代码实操插入数据删除数据更新数据查询数据 案例讲解 在 Python3 中&#xff0c;我们可以使用 mysqlclient或者 pymysql三方库来接入 MySQL 数据库并实现数据持久化操作。二者的用法完全相同&…

Jenkins部署失败:JDK ‘jdk1.8.0_381‘ not supported to run Maven projects

Jenkins部署报错&#xff1a;JDK ‘jdk1.8.0_381’ not supported to run Maven projects提示使用的jdk有问题&#xff0c;启动的jdk版本不能满足项目启动。 登录Jenkins管理页面&#xff0c;系统管理——全局工具配置——JDK安装配置满足条件的JDK版本&#xff0c;保存配置&…

Parallels Client for Mac:改变您远程控制体验的革命性软件

在当今数字化的世界中&#xff0c;远程控制软件已经成为我们日常生活和工作中不可或缺的一部分。在众多远程控制软件中&#xff0c;Parallels Client for Mac以其独特的功能和出色的性能脱颖而出&#xff0c;让远程控制变得更加简单、高效和灵活。 Parallels Client for Mac是…

实现el-table打印功能,样式对齐,去除滚动条

实现el-table打印功能,样式对齐&#xff0c;去除滚动条 // 整个页面打印 function printTable(id) {// let domId #js_index// if (id) {// domId #${ id };// }// let wpt document.querySelector(domId);// let newContent wpt.innerHTML;// let oldContent document.…

08数据结构——排序

8.2 插入排序 8.2.1 直接插入排序 直接插入排序&#xff08;用哨兵&#xff09;代码如下&#xff1a; void InsertSort(ElemType A[],int n){int i,j;for(i2;i<n;i) //依次将A[2]~A[n]插入前面已排序序列if(A[i]<A[i-1]){ //若A[i]关键码小于其前驱…

成都瀚网科技有限公司抖音小店:创新营销引领电商潮流

在当今数字化时代&#xff0c;抖音作为一款备受欢迎的短视频平台&#xff0c;不仅吸引了大量用户的关注&#xff0c;还为众多电商企业提供了新的销售渠道。成都瀚网科技有限公司抖音小店便是其中之一&#xff0c;凭借其独特的营销策略和优质的产品&#xff0c;成为了抖音电商领…

PyCharm改变代码背景图片的使用教程

一个好的集成环境是学习和使用一门编程语言的重中之重&#xff0c;这次我给大家分享如何改变PyCharm软件的代码背景图片。 说明&#xff1a;本教程使用的是汉化版PyCharm软件。 打开PyCharm软件。 点击软件最上方导航栏的文件&#xff0c;然后找到设置。 打开设置然后点击外观…

Baumer工业相机堡盟工业相机如何使用BGAPISDK生成视频(C++)

Baumer工业相机 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、计数和识别、运动分析和图像处理 Baumer的万兆网相机拥有出色的图像处理性能&#xff0c;可以实时传输高分辨率图像。此外&#xff0c;该相机还…

总结使用React做过的一些优化

一、修改css模拟v-show {!flag && <MyComponent style{{display: none}} />} {flag && <MyComponent />}<MyComponent style{{ display: flag ? block : none }} />二、循环使用key const todosList todos.map(item > {<li key{it…

Web APIs——焦点事件以及小米搜索框

一、事件类型 二、焦点事件 <body><input type"text"><script>const input document.querySelector(input)input.addEventListener(focus,function(){console.log(有焦点触发)})input.addEventListener(blur,function(){console.log(失去焦点触…

JS数组扁平化多维数组变为一维数组的三种方法

在实践中&#xff0c;我们有一个多维数组&#xff0c;我想把它变为一维数组&#xff0c;我们该怎么办呢&#xff1f; 让我为大家介绍一下吧&#xff01; 1.flat方法 我们使用flat可以实现降维 // 声明一个数组const arr [1,2,3,[4,5,6]]// 我们使用flat方法console.log(arr.…