vue3 + vite 使用 svg 可改变颜色
文章目录
- vue3 + vite 使用 svg
- 安装插件
- 2、配置插件 vite.config.js
- 3、根据vite配置的svg图标文件夹,建好文件夹,把svg图标放入
- 4、在 src/main.js内引入注册脚本
- 5、创建一个公共SvgIcon.vue组件
- 6.1 全局注册SvgIcon.vue组件
- 6.2、在想要引入svg的vue组件中引入
- 7、如果想要用color控制svg图标颜色,那么需要修改.svg文件中的fill属性 建议直接删掉 fill
vue3 + vite 使用 svg
安装插件
npm install vite-plugin-svg-icons -Dnpm install fast-glob -D
2、配置插件 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'const pathResolve = (pathStr) => {return path.resolve(__dirname, pathStr)
}// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的svg图标文件夹,即需要识别的svg都应该放在这个文件夹下// iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],// 或iconDirs: [pathResolve('./src/assets')],// 指定symbolId格式(这里的配置与6.2步骤中的引入svg组件的name配置项写法有关)symbolId: 'icon-[dir]-[name]',}),], resolve: {// 设置路径别名alias: {'@': pathResolve('./src'),}},
})
3、根据vite配置的svg图标文件夹,建好文件夹,把svg图标放入

4、在 src/main.js内引入注册脚本
import 'virtual:svg-icons-register'

5、创建一个公共SvgIcon.vue组件
src/components/SvgIcon.vue
<template><svg aria-hidden="true" class="svg-icon"><use :xlink:href="symbolId"/></svg>
</template><script>
import { defineComponent, computed } from 'vue'export default defineComponent({name: 'SvgIcon',props: {// 使用的svg图标名称,也就是svg文件名name: {type: String,required: true,},prefix: {type: String,default: 'icon',}},setup(props) {const symbolId = computed(() => `#${props.prefix}-${props.name}`)return { symbolId }},
})
</script>
<style scope>
.svg-icon {width: 26px;height: 26px;fill: currentColor;
}
</style>
6.1 全局注册SvgIcon.vue组件
在main.js中引入SvgIcon.vue组件,全局注册后在需要使用SvgIcon组件的地方将无需再引入。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import 'virtual:svg-icons-register'import SvgIcon from './components/SvgIcon.vue'createApp(App).component('SvgIcon', SvgIcon).mount('#app')
6.2、在想要引入svg的vue组件中引入
已App.vue 示例
<template><!-- 使用不是在svgs目录中嵌套文件夹下的svg图标的name写法:写上svg图标文件名即可 --><SvgIcon class="delete-icon" name="home-fill"></SvgIcon><!-- 使用是在svgs目录中嵌套文件夹下的svg图标的name写法:中划线前面是文件夹名称,后面是svg图标文件名称 --><!-- <SvgIcon class="edit-icon" name="msg-iconEdit"></SvgIcon> --></template><style lang="scss">
// 自定义svg颜色,宽高等样式
// 注意:这里之所以能自定义svg颜色,是因为我在.svg文件中把fill="xxx颜色值" 改为了fill="currentColor" (见下面第7步骤描述) 建议直接删掉 fill
.delete-icon {color: pink;}
.delete-icon:hover{color: blue;
}
</style>
7、如果想要用color控制svg图标颜色,那么需要修改.svg文件中的fill属性 建议直接删掉 fill

相关文章:
vue3 + vite 使用 svg 可改变颜色
文章目录vue3 vite 使用 svg安装插件2、配置插件 vite.config.js3、根据vite配置的svg图标文件夹,建好文件夹,把svg图标放入4、在 src/main.js内引入注册脚本5、创建一个公共SvgIcon.vue组件6.1 全局注册SvgIcon.vue组件6.2、在想要引入svg的vue组件中引…...
SQL82 返回 2020 年 1 月的所有订单的订单号和订单日期
描述Orders订单表order_numorder_datea00012020-01-01 00:00:00a00022020-01-02 00:00:00a00032020-01-01 12:00:00a00042020-02-01 00:00:00a00052020-03-01 00:00:00【问题】编写 SQL 语句,返回 2020 年 1 月的所有订单的订单号(order_num)…...
vulnhub zico2
总结:脏牛提权 目录 下载地址 漏洞分析 信息收集 木马上传 反弹shell 提权 下载地址 zico2.ova (Size: 828 MB)Download: https://www.dropbox.com/s/dhidaehguuhyv9a/zico2.ovaDownload (Mirror): https://download.vulnhub.com/zico/zico2.ova使用方法&…...
处理窗口的常用API函数及窗口处理经验总结(附源码)
目录 1、检测窗口状态 2、将窗口前置显示 2.1、将窗口拉到最前面显示 2.2、将窗口置顶显示 2.3、将窗口设置到指定窗口的上面 3、将不显示的窗口强行显示出来 4、获取窗口的信息 5、通过窗口信息去查找窗口 5.1、调用GetClassName接口去比对窗口的类名 5.2、调用Find…...
@TableId注解详细介绍
TableId注解是专门用在主键上的注解,如果数据库中的主键字段名和实体中的属性名,不一样且不是驼峰之类的对应关系,可以在实体中表示主键的属性上加Tableid注解,并指定Tableid注解的value属性值为表中主键的字段名既可以对应上。 …...
kubectl常用的命令
目录 安装 kubectl 一、命令自动补全 二、常用命令 1、查看所有pod列表 2、查看RC和service列表 3、显示Node的详细信息 4、显示Pod的详细信息, 特别是查看Pod无法创建的时候的日志 5、 根据yaml创建资源, apply可以重复执行,create不行 6、基于nginx.yaml…...
Linux 配置远程SSH服务(密码+密钥)
环境准备: 将虚拟机1恢复快照,然后手动配置一个NAT模式IP为192.168.200.100,hostname设置为fuwu1 将虚拟机1复制为虚拟机2,然后手动配置一个NAT模式IP为192.168.200.200,hostname设置为fuwu2 windows准备 xshell 或 pu…...
WuThreat身份安全云-TVD每日漏洞情报-2023-02-20
漏洞名称:Microsoft Exchange Server 远程执行代码漏洞 漏洞级别:高危 漏洞编号:CVE-2023-21529,CNNVD-202302-1075 相关涉及:Microsoft Exchange Server 2016 Cumulative Update 23 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-03822 漏洞…...
面试经常被问悲观锁和乐观锁?什么是cas?来我花3分钟时间告诉你
锁大家都知道吧,多线程访问资源会存在竞争,那么就需要加锁进而让多个线程一个一个访问。 比如有一个房间,一次只能进一个人,现在有十个人都想进去怎么办? 对,加锁。拿一把钥匙,谁抢到钥匙谁就…...
React源码分析3-render阶段(穿插scheduler和reconciler)
本章将讲解 react 的核心阶段之一 —— render阶段,我们将探究以下部分内容的源码: 更新任务的触发更新任务的创建reconciler 过程同步和异步遍历及执行任务scheduler 是如何实现帧空闲时间调度任务以及中断任务的 触发更新 触发更新的方式主要有以下几…...
3功能测试心得分享
1. 登陆、添加、删除、查询模块是我们经常遇到的,这些模块的测试点该如何考虑 (1)登陆 ① 用户名和密码都符合要求(格式上的要求) ② 用户名和密码都不符合要求(格式上的要求) ③ 用户名符合要求,密码不符合要求(格式上的要求) ④ 密码符合要求ÿ…...
Python-推导式
Python 推导式 Python 推导式是一种独特的数据处理方式,可以从一个数据序列构建另一个新的数据序列的结构体。 Python 支持各种数据结构的推导式: 列表(list)推导式 字典(dict)推导式 集合(set)推导式 元组(tuple)推导式 列表推导式 列表推导式格式…...
操作系统线程
进程那一章,我们留下了一个问题 第一个cpu调用进程,进程调用i/o设备,主动进入ready 队列 第二个cpu将程序执行时间平均分时,进程执行时间到 第三个fork函数,我们上一章的lab有实践,可以看出是父进程主动条用…...
vue3中如何定义响应式变量
vue2中定义方式: 熟悉vue2的前端开发小伙伴,都知道定义变量的方式是属于 选项式写法,所有的变量名全都定义在 data(){return { title:‘hello world’}},里,如下图所示: <template><div><h1>{{tit…...
【C++修炼之路】20.手撕红黑树
每一个不曾起舞的日子都是对生命的辜负 红黑树实现:RBTree 前言一.红黑树的概念及性质1.1 红黑树的概念1.2 红黑树的性质二.红黑树的结构2.1 红黑树节点的定义2.2 红黑树类的封装三.红黑树的插入情况1:只变色情况2:变色单旋情况3:双旋插入的代…...
树状数组(高级数据结构)-蓝桥杯
一、简介树状数组 (Binary Indexed Tree,BIT),利用数的二进制特征进行检索的一种树状结构。一种真正的高级数据结构: 二分思想、二叉树、位运算、前缀和。高效!代码极其简洁!二、基本应用数列a1,a2,....,an,操作:单点修改…...
Flink-多流转换(Union、Connect、Join)
文章目录多流转换分流基本合流操作联合(Union)连接(Connect)基于时间的合流——双流联结(Join)窗口联结(Window Join)间隔联结(Interval Join)窗口同组联结&a…...
kubeadmin安装k8s集群
目录 一 、环境部署 1、服务器规划 2、环境准备 二、所有节点安装docker 1、配置yum源,安装docker 2、配置daemon.json文件 三、所有节点安装kubeadm、kubelet 和kubectl 四、部署k8s集群 1、查看初始化需要的镜像 2、导入镜像 3、初始化kubeadm 3.1 方…...
java3月train笔记
java笔记 day01 一、jdk和idea下载及安装(一般不建议装C盘): jdk:java开发环境 idea:开发工具(软件),用来编写代码的 苍老师文档服务器:doc.canglaoshi.org jdk下载&…...
Apollo Config原理浅析
文章目录1. 简介2. 基本功能3. Apollo关键功能实现原理3.1 框架整体原理3.1.1 Apollo角色3.1.2 框架执行原理3.1.3 整体组成3.2 细节实现3.2.1 Eureka和不同角色机器的关系3.2.2 Meta Server的作用3.2.3 ReleaseMessage消息实现原理3.2.4 Client的通信方式1. 简介 apollo是携程…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
