当前位置: 首页 > news >正文

小白系列Vite-Vue3-TypeScript:010-封装svg

上一篇我们介绍了Vite+Vue3+TypeScript项目中mockjs的安装和配置i。本篇我们来介绍封装SVG图标组件。

svg特征

  • Preloading所有图标都是在项目运行时生成的,只需要操作一次dom即可。

  • 高性能内置缓存,仅在文件被修改时才会重新生成。

安装插件vite-plugin-svg-icons

//安装依赖
npm i vite-plugin-svg-icons -D

配置vite.config.ts

在vite.config.ts中添加相关配置内容

//引入依赖
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";//启用插件
createSvgIconsPlugin({// 指定图标文件夹,绝对路径(NODE代码)iconDirs: [path.resolve(process.cwd(), "src/svgs")],
}),

创建图标库

项目src文件夹下新建svgs文件夹,随便导入一个svg图标文件,这里我下载了两个图标user.svg和pwd.svg

封装SvgIcon组件

在components文件夹下创建SvgIcon组件,代码如下

<template><svg aria-hidden="true" class="svg-icon" :style="{ width: width + 'px', height: height + 'px', color: color }"><use :xlink:href="symbolId" /></svg>
</template><script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({name: "SvgIcon",props: {// 使用的svg图标名称,也就是svg文件名name: {type: String,required: true,},prefix: {type: String,default: "icon",},color: {type: String,default: "#fff",},width: {type: String,default: '32'},height: {type: String,default: '32'}},setup(props) {const symbolId = computed(() => `#${props.prefix}-${props.name}`);return { symbolId };},
});
</script><style scope>
.svg-icon {fill: currentColor;
}
</style>

全局引入

创建完组建后,我们需要在main.ts中对组件进行全局引入

// 引入Svg组件
import "virtual:svg-icons-register";
import SvgIcon from "./components/SvgIcon.vue";

这样我们就可以在项目中直接使用SvgIcon组件来展示图标了

<svg-icon name="pwd" width="48" height="48" color="#ffff00"></svg-icon>

Svg图标使用

在src/views/index.vue中添加svg图片,引入图标规则,svgs文件夹下的直接name="文件名"即可,如果存在文件夹包裹,则遵循规则name="文件夹名-文件名"

<div><h1>SVG 图标使用</h1><svg-icon name="user" width="64" height="64"></svg-icon><svg-icon name="login-pwd" width="48" height="48" color="#ffff00"></svg-icon>
</div>

注意:如果想要让color属性生效(修改图标颜色),首先要svg图标支持fill属性修改才可以。我们可以在编辑器打开svg,然后把fill或者strock的值改成currentColor即可。

运行效果

至此,SvgIcon组件封装完成!

我相信,每天学习一点点,收获成长亿点点!

相关文章:

小白系列Vite-Vue3-TypeScript:010-封装svg

上一篇我们介绍了ViteVue3TypeScript项目中mockjs的安装和配置i。本篇我们来介绍封装SVG图标组件。svg特征Preloading所有图标都是在项目运行时生成的&#xff0c;只需要操作一次dom即可。高性能内置缓存&#xff0c;仅在文件被修改时才会重新生成。安装插件vite-plugin-svg-ic…...

卷严重、难度高、激励少,如何适应空投市场新变化

自从空投交互从2020年开始之后&#xff0c;不少人都开始加入到空投交互的行列中&#xff0c;一些项目也因为“格局”的因素&#xff0c;在项目正式上线前都会给早期参与者空投代币&#xff0c;以此吸引大家的关注。但是在越来越多的人加入到撸空投行列之中后&#xff0c;现在整…...

基于Java与JSP的文件上传和下载

概念 当用户在前端页面点击文件上传后&#xff0c;用户上传的文件数据提交给服务器端&#xff0c;实现保存。 文件上传步骤 提交方式&#xff1a; 提供form表单&#xff0c;method必须是post。因为post请求无数据限制。 <form method"post"></form>…...

Gromacs中的g_mmpbsa计算带电底物与蛋白的结合能不准确

g_mmpbsa计算带电底物与蛋白的结合能总是不准确 TOC 在做的两个项目中&#xff0c;利用g_mmpbsa计算带电底物与蛋白的结合能结果非常不可靠&#xff0c;底物带两个硫酸根离子&#xff0c;g_mmpbsa在计算带电的底物与酶的结合能时总是不准确&#xff0c;因此后续若底物带电&…...

【mmrotate】旋转目标检测之训练DOTA数据集

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 mmrotate训练DOTA数据集记录 1. 正文 1.1 数据准备 数据介绍部分&#xff0c;参考DOTA数据介绍&#xff0c;官方提供了裁剪工具development kit。这里…...

图基本概念

图&#xff1a;顶点和边的集合。无向图&#xff1a;每条边都是无方向的有向图&#xff1a;每条边都是有方向的完全图&#xff1a;任意两个点都有一条边相连稀疏图&#xff1a;有很少边或弧的图稠密图&#xff1a;有较多边或弧的图网&#xff1a;边/弧带权的图邻接&#xff1a;有…...

机器学习基础

一、基本概念 1 学习的概念 1975年图灵奖获得者、1978年诺贝尔经济学奖获得者、著名学者赫伯特.西蒙 (Herbert Simon) 曾下过一个定义: 如果一个系统&#xff0c;能够通过执行某个过程&#xff0c;就此改进了它的性能&#xff0c;那么这个过程就是学习.由此可看出&#xff0c;…...

FreeRTOS-Tickless低功耗模式 | FreeRTOS十四

目录 说明&#xff1a; 一、低功耗模式简介 1.1、STM32低功耗模式 二、Tickless模式 2.1、Tickless模式如何功耗 2.2、Tickless模式设计思想 2.3、为了降低功耗&#xff0c;又不影响系统运行&#xff0c;怎么能做到呢&#xff1f; 三、Tickless模式修改配置 3.1、配置…...

实现了统一消息中心的微服务基础框架 JVS,快点赞收藏

一、开源项目简介基于JVS&#xff08;基于spring cloud封装&#xff09;的基础开源框架&#xff0c;实现了基于多对多租户能力的管理系统。二、基础框架实现功能支持数据管理支持分布式定时任务支持分布式日志采集支持系统监控支持动态配置中心支持模板消息支持链路跟踪支持邮件…...

VMware 安装 OpenWrt 旁路由并配置 PassWall

1、准备 OpenWrt 镜像包 我已经转好了 vmdk 格式的&#xff0c;更多的可以去恩山论坛下载 OpenWrtvmdk格式-虚拟化文档类资源-CSDN下载 也可以在这个平台在线定制 OpenWrt固件下载与在线定制编译 2、网络选择 NAT 模式 3、创建虚拟机&#xff0c;选择自定义方式 4、一直下…...

R语言GD包地理探测器分析时报错、得不到结果等情况的解决方案

本文介绍在利用R语言的GD包&#xff0c;实现自变量最优离散化方法选取与执行、地理探测器&#xff08;Geodetector&#xff09;操作时&#xff0c;出现各类报错信息、长时间得不到结果等情况的解决方案。 在之前的文章R语言GD包基于栅格图像实现地理探测器与连续参数的自动离散…...

嵌入式开发:你需要知道的5种简单

传达嵌入式软件体系结构设计意图通常伴随着基于嵌入式开发人员经验的假设。你可以从资源受限的基于微控制器的系统的角度来看架构设计。如何设计架构将取决于系统的嵌入式软件分类。有许多不同的方法可以对嵌入式软件进行分类。我发现有五种简单的嵌入式软件分类可以帮助我调整…...

MVC与MVVM

MVC与MVVM举例说明MVCMVVM两者比较MVC <!DOCTYPE html> <html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>mvc案例</title><link rel"styleshe…...

Cortex-M0异常和中断

目录1.概念2.异常类型3.异常优先级定义4.向量表5.异常流程概述接受异常请求压栈和出栈异常返回指令末尾连锁延迟到达6.EXC_RETURN7.异常入口流程的细节压栈取出向量并更新PC寄存器更新8.异常退出流程的细节1.概念 异常是能够引起程序流偏离正常流程的事件&#xff0c;当异常发…...

数据库(6)--存储过程

一、学习目标 熟悉存储过程的定义和使用&#xff0c;熟练运用 select ,update ,insert ,delete 命令完成对学生信息数据库的查询、更新、添加、删除操作。 二、学习内容 学生&#xff08;学号&#xff0c;年龄&#xff0c;性别&#xff0c;系名&#xff09; 课程&#xff08;…...

c++ 指针、引用和常量

指针、引用和常量的关系_夜悊的博客-CSDN博客 1. ① 指针是对象&#xff0c;引用不是对象&#xff08;在此可以理解为变量&#xff0c;一个变量是一个对象&#xff09; 指针不必须初始化引用只是为一个已经存在的对象所起的另一个名字&#xff08;别名&#xff09;&#xff…...

1、HAL库UART 中断|DMA 自动回显接收数据

1、实现代码&#xff1a; stm32f4xx_hal_conf.h文件开启UART宏定义 #define HAL_UART_MODULE_ENABLED添加stm32f4xx_hal_uart.c和stm32f4xx_hal_dma.c到自己工程&#xff1b; 编写好的代码&#xff1a;usart_Driver.c /***************************************************…...

NPOI - ConditionalFormattingRule

NPOI 给xls(xlsx)创建条件格式 获取 XSSFSheetConditionalFormatting 对象 初始化 IWorkbook _workbook new XSSFWorkbook(); ISheet _dataSheet _workbook.GetSheet("template"); ISheetConditionalFormatting fcs _dataSheet.SheetConditionalFormatting;调用…...

JavaのString类这一篇就够了(包含StringBuffer_Builder)

1.&#x1f957;String类简介 在我们写代码的时候&#xff0c;String总是充斥着前前后后。 但你会不会经常力不从心&#xff0c; “这个*** 字符串怎么** 转换不成功啊” “*** 这个字符串到底是常量还是对象啊” “这*** 字符串内存结构到底* * * 是什么啊” “为啥我的字符串…...

C# dataGridView 导出表格 xls NPOI 2.4.1 版本

using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; try { SaveFileDialog fileDialog new SaveFileDialog(); fileDialog.Filter “Excel(97-2003)|*.xls”; if (fileDialog.ShowDialog() System.Windows.Forms.DialogResult.Cancel) { return; } //不允许dataGridView…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

Pydantic + Function Calling的结合

1、Pydantic Pydantic 是一个 Python 库&#xff0c;用于数据验证和设置管理&#xff0c;通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发&#xff08;如 FastAPI&#xff09;、配置管理和数据解析&#xff0c;核心功能包括&#xff1a; 数据验证&#xff1a;通过…...