vue3 + vite + antdv 项目中自定义图标

前言:

        去iconfont-阿里巴巴矢量图标库 下载自己需要的icon图标,下载格式为svg;项目中在存放静态资源的文件夹下 assets 创建一个存放svg格式的图片的文件夹。

步骤:

 1、安装vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D

2、创建svgIcon.vue组件

<template><svg aria-hidden="true" :class="svgClass"><use :xlink:href="symbolId" :fill="props.color" /></svg>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({name: "svg-icon",
});
</script>
<script setup>
import { computed } from "vue";
const props = defineProps({prefix: {type: String,default: "icon",},name: {type: String,require: true,},color: {type: String,default: "#333",},className: {type: String,default: "",},
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
console.log(symbolId.value, "symbolIdsymbolId");
const svgClass = computed(() => {if (props.className) {return `svg-icon ${props.className}`;}return "svg-icon";
});
</script><style>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.1em;/* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */fill: currentColor;/* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */overflow: hidden;
}
</style>

3、在main.js文件中全局注册

4、在vite.config.js文件中进行配置

5、在其他组件中使用

效果:

 

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

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

相关文章

安装SQL Server 2022提示需要Microsoft .NET Framework 4.7.2 或更高版本

安装SQL Server 2022提示需要Microsoft .NET Framework 4.7.2 或更高版本。 原因是&#xff1a;当前操作系统版本为Windows Server 2016 Standard版本&#xff0c;其自带的Microsoft .NET Framework 版本为4.6太低&#xff0c;不满足要求。 根据报错的提示&#xff0c;点击链接…

学习笔记039——SpringBoot整合Redis

文章目录 1、Redis 基本操作Redis 默认有 16 个数据库&#xff0c;使用的是第 0 个&#xff0c;切换数据库添加数据/修改数据查询数据批量添加批量查询删除数据查询所有的 key清除当前数据库清除所有数据库查看 key 是否存在设置有效期查看有效期 2、Redis 数据类型String追加字…

基于yolov8、yolov5的铝材缺陷检测识别系统(含UI界面、训练好的模型、Python代码、数据集)

摘要&#xff1a;铝材缺陷检测在现代工业生产和质量管理中具有重要意义&#xff0c;不仅能帮助企业实时监控铝材质量&#xff0c;还为智能化生产系统提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的铝材缺陷检测模型&#xff0c;该模型使用了大量包含…

如何在 VPS 上使用 Git 设置自动部署

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 要了解 Git 的基本知识以及如何安装&#xff0c;请参考介绍教程。 本文将教你如何在部署应用程序时使用 Git。虽然有许多使用 Gi…

Goland或Idea启动报错

Goland或Idea启动不了 报错如图&#xff1a; 原因&#xff1a;破解导致 解决方案 环境变量中有关Goland的全部删除

ceph手动部署

ceph手动部署 一、 节点规划 主机名IP地址角色ceph01.example.com172.18.0.10/24mon、mgr、osd、mds、rgwceph02.example.com172.18.0.20/24mon、mgr、osd、mds、rgwceph03.example.com172.18.0.30/24mon、mgr、osd、mds、rgw 操作系统版本&#xff1a; Rocky Linux release …

C#基础之方法

文章目录 1 方法1.1 定义方法1.2 参数传递1.2.1 按值传递参数1.2.2 按引用传递参数1.2.3 按输出传递参数1.2.4 可变参数 params1.2.5 具名参数1.2.6 可选参数 1.3 匿名方法1.3.1 Lambda 表达式1.3.1.1 定义1.3.1.2 常用类型1.3.1.3 Lambda 表达式与 LINQ1.3.1.4 Lambda 表达式的…

Unity——Toggle的状态监听处理

文章目录 前言一、单个Toggle的事件监听二、多个Toggle的事件监听注意事项 前言 在Unity中&#xff0c;Toggle 是一种用户界面&#xff08;UI&#xff09;元素&#xff0c;通常用于提供一个开关选项&#xff0c;允许用户选择开启或关闭某个特定的功能。Toggle 组件有一个 onVa…

PMP–一、二、三模、冲刺–分类–8.质量管理

文章目录 技巧五、质量管理 一模8.质量管理--质量管理计划--质量管理计划包括项目采用的质量标准&#xff0c;到底有没有满足质量需求&#xff0c;看质量标准即可。6、 [单选] 自项目开始以来&#xff0c;作为项目经理同事的职能经理一直公开反对该项目&#xff0c;在讨论项目里…

LabVIEW实现UDP通信

目录 1、UDP通信原理 2、硬件环境部署 3、云端环境部署 4、UDP通信函数 5、程序架构 6、前面板设计 7、程序框图设计 8、测试验证 本专栏以LabVIEW为开发平台,讲解物联网通信组网原理与开发方法,覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例,展示如何利…

在 Ubuntu 20.04 上使用 Lux 下载 Bilibili 视频的详细教程

在 Ubuntu 20.04 上使用 Lux 下载 Bilibili 视频的详细教程 在 Ubuntu 20.04 上使用 Lux 下载 Bilibili&#xff08;哔哩哔哩&#xff09;视频的完整和详细步骤如下&#xff0c;包括使用预编译二进制文件的安装方法&#xff1a; 1. 安装依赖 确保你的系统已安装 FFmpeg&…

C语言——库函数

常用的函数 https://cplusplus.com/reference/ 没事儿多看看 1 数学函数 #include <math.h> #include <stdio.h> int main() {printf("%lf\n", sqrt(4));//开平方根——>double类型printf("%lf\n", pow(2, 10));//求几次方的——>do…

纯Go语言开发人脸检测、瞳孔/眼睛定位与面部特征检测插件-助力GoFly快速开发框架

前言​ 开发纯go插件的原因是因为目前 Go 生态系统中几乎所有现有的人脸检测解决方案都是纯粹绑定到一些 C/C 库&#xff0c;如 ​​OpenCV​​ 或 ​​​dlib​​​&#xff0c;但通过 ​​​cgo​​​ 调用 C 程序会引入巨大的延迟&#xff0c;并在性能方面产生显著的权衡。…

硬菜3道+馒头

硬菜3道 1、可乐鸡翅 》鸡翅滑刀酱油耗油胡椒粉盐》 搅拌腌制3-5分钟 》油锅&#xff0c;直到2面煎黄 》倒入可乐&#xff0c;到大火收汁&#xff0c;出锅 2、洋葱牛肉 》冻牛肉切薄酱油耗油胡椒粉盐 》手指摇匀 》加入生粉水&#xff0c;继续摇匀》直到粘稠 》油锅牛肉炒半熟&…

27 基于51单片机的方向盘模拟系统

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STC89C52单片机&#xff0c;采用两个MPX4115压力传感器作为两路压力到位开关电路&#xff0c; 采用滑动变阻器连接数模转换器模拟重力加速度传感器电路&#xff1b; 一个按键控制LED灯的点亮与…

win10环境mysql8.4免安装版配置

下载后解压 dos管理员&#xff0c;进入bin目录 mysqld -install net start mysql 出现错误&#xff0c;服务无法启动 MySQL 服务正在启动 . MySQL 服务无法启动。 服务没有报告任何错误。 请键入 NET HELPMSG 3534 以获得更多的帮助。 services.msc&#xff0c;查看服务…

【C语言】结构体嵌套

结构体嵌套是指在一个结构体中定义另一个结构体作为其成员。这种方式可以实现更复杂的数据结构设计&#xff0c;便于对数据进行分层管理和组织&#xff0c;广泛应用于实际开发中&#xff0c;例如操作系统内核、嵌入式系统、网络协议解析等。下面是对结构体嵌套的详细介绍&#…

Java中的请求重发机制:详细解读与实现

Java中的请求重发机制&#xff1a;详细解读与实现 在进行网络请求时&#xff0c;尤其是对外部服务的调用&#xff0c;网络波动或服务器故障常常会导致请求失败。因此&#xff0c;重试机制&#xff08;请求重发&#xff09;是实现高可用系统的重要组成部分。在Java中&#xff0…

贪心算法理论

系列博客目录 文章目录 系列博客目录贪心算法 (Greedy Algorithm)贪心算法的特点贪心算法的适用条件常见的贪心算法问题贪心算法的步骤贪心算法示例&#xff1a;活动选择问题贪心算法的优缺点 贪心算法 (Greedy Algorithm) 贪心算法是一种在每一步选择中都采取当前状态下最优的…

centos更换源文件,换源,替换源

期初怎么折腾就是不行&#xff0c;换了源也是不能使用的&#xff0c;最后发现不是换的源不行&#xff0c;而是之前的源文件不行&#xff0c;然后给所有的源文件在yum源统一放在了bak目录下&#xff0c;随后我们再去下载安装源文件。 您将yum源下载之后&#xff0c;先将您的其他…