Vue3 SvgIcon组件开发

news2024/12/22 8:58:35

在前面自定义tree组件继续功能迭代前,我们先开发一个通用的ScgIcon组件,用于后续组件模板中小图标的展示。

引入iconfont

官网:https://www.iconfont.cn/

选取图标进行下载,只取iconfont.js文件

在这里插入图片描述

prettier中忽略该文件:

在这里插入图片描述

放入iconfont.js文件:

在这里插入图片描述

开发SvgIcon组件

在这里插入图片描述

vitepress整合

增加菜单

在这里插入图片描述

全局引入和注册

在这里插入图片描述

编写markdown文档:

在这里插入图片描述

编写组件示例:

在这里插入图片描述

执行效果:

在这里插入图片描述

应用到Tree组件

tree组件模板中应用<SvgIcon>组件。

在这里插入图片描述

将原先的+-符号的按钮替换为自定义折叠展开图标:

在这里插入图片描述

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

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

相关文章

NS4890C 2.4W 单声道AB类音频放大器

前言&#xff1a; 3W单声道关断模式音频功率放大器AD4150B NS4890C 国产小功放&#xff0c;性价比高&#xff0c;体积小MSOP8封装 参考价格0.2元 NS4890C 2.4W 单声道AB类音频放大器 1 产品特点 电压范围&#xff1a;3.0V-5.0V 输出功率&#xff1a;1.56WRL8Ω/THDN10% 关机…

基于Python的帕金森病人步态分析

目录 摘要一、引言1.背景知识2.实验目的和意义 二、实验方法1.实验环境2.实验步骤2.1 生成信号&#xff0c;进行手动傅里叶变换以及内置 FFT 函数傅里叶变换2.2 进行手动傅里叶变换以及内置 FFT 函数傅里叶变换2.3 基于傅里叶变换的步态信息分析2.4 基于傅里叶变换的卷积分析 3…

2024新版 黑马程序员《C++零基础入门》笔记——入门09 cout打印输出

1.cout打印输出 2.代码练习 #include "iostream" using namespace std;int main() {cout << "I love Libby!" << endl;cout << 10 << endl;cout << "I am 10" << "years old." << endl;re…

Marin说PCB之1000-BASE-T1上的共模电感的选型知多少?

单板上的电子原件的物料的升级和替代想必对我们做这些做硬件的同志们并不陌生吧&#xff0c;之前遇到最多情况的就是一些主芯片上的电容可能由于电源完整性得原因需要替换成一个性能好一些物料&#xff0c;这个是比较常见的操作&#xff0c;一般做法都是仿真的同事自己把两颗电…

初试Ollama本地大模型

准备工作 机器配置&#xff1a; CPUi5-10400内存16GB硬盘SSD 480GB显卡GTX 1660 系统&#xff1a;Ubuntu 18.04 Server NVIDIA驱动安装 - 下载 驱动下载地址&#xff1a;https://www.nvidia.cn/geforce/drivers/ - 获取下载链接 GTX 1660驱动下载链接&#xff1a;https://…

Django执行ORM时打印SQL语句

settings中添加LOGGING相关日志配置 LOGGING {version: 1,disable_existing_loggers: False,handlers: {console:{level:DEBUG,class:logging.StreamHandler,},},loggers: {django.db.backends: {handlers: [console],propagate: True,level:DEBUG,},}}批量查询DEMO&#xf…

硅纪元视角 | 类器官智能OI技术实现将人脑植入机器人

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

Mysql基础速过

一、数据库相关概念 1.1 相关概念 名称全称简称数据库存储数据的仓库、数据是有组织的进行存储DataBase(DB)数据库管理系统操作和管理数据库的大型软件DataBase Management System(DBMS)SQL操作关系型数据库的编程语言&#xff0c;定义了一套操作关系型数据库统一标准Structu…

领略诗词之妙,发觉生活之美。

文章目录 引言落霞与孤鹜齐飞,秋水共长天一色。野渡无人舟自横。吹灭读书灯,一身都是月。我醉欲眠卿且去,明朝有意抱琴来。赌书消得泼茶香,当时只道是寻常。月上柳梢头,人约黄昏后。最是人间留不住,朱颜辞镜花辞树。山中何事?松花酿酒,春水煎茶。似此星辰非昨夜,为谁风…

C语言数据结构课设:基于EasyX前端界面的飞机订票系统

数据结构课程设计说明书 学 院、系&#xff1a; 软件学院 专 业&#xff1a; 软件工程 班 级&#xff1a; 学 生 姓 名&#xff1a; 范 学 号&#xff1a; 设 计 题 目&#xff1a; 飞机订票系统 起 迄 日 期: 2024年6月18日~ 20…

Day19 | 77. 组合 216.组合总和III 17.电话号码的字母组合

语言 Java 77. 组合 组合 题目 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 思路 回溯算法&#xff0c;其实也是递归的思想加上回溯 递归的终止条件&#xff1a;集合大小等于k了 递归参数&#xff1a;…

网闸(Network Gatekeeper或Security Gateway)

本心、输入输出、结果 文章目录 网闸(Network Gatekeeper或Security Gateway)前言网闸主要功能网闸工作原理网闸使用场景网闸网闸(Network Gatekeeper或Security Gateway) 编辑 | 简简单单 Online zuozuo 地址 | https://blog.csdn.net/qq_15071263 如果觉得本文对你有帮助…

如何开户投放必应Bing国内搜索广告?

有效的互联网营销渠道是企业提升品牌知名度和促进业务增长的关键&#xff0c;必应Bing作为微软旗下的全球领先搜索引擎之一&#xff0c;其国内搜索广告平台为企业提供了一个高效、精准的营销渠道。云衔科技作为微软必应Bing的官方代理商&#xff0c;为企业提供了专业的一站式开…

外六角半螺纹螺丝主要应用领域

外六角半螺纹螺丝&#xff0c;作为一种常见的紧固件&#xff0c;因其独特的设计和多样的功能而在多个工业领域中占据着重要的地位。这种螺丝的一端具有完整的螺纹&#xff0c;而另一端则可能没有螺纹或螺纹较短&#xff0c;这样的设计使其在某些应用场景中具有独特的优势。 应用…

git配置BeyondCompare解决冲突(全网最细讲解,亲测有用,windows版本)

前言&#xff1a; 网上查阅了很多资料&#xff0c;大都讲的不是很全面&#xff0c;很多还配置不成功&#xff0c;特写此篇博客来详细全面的讲解配置步骤&#xff08;亲测可用&#xff09;。本篇文章具有局限性&#xff0c;欢迎大家相互交流&#xff0c;批评指正。 特此说明&am…

【快速实践 OpenCV morphology】形态学操作:腐蚀、膨胀、开运算、闭运算

✨我们将以下图为例&#xff0c;快速实践不同的形态学操作&#xff0c;如腐蚀 erode、膨胀 dilate、开 open、闭 close … import cv2 import numpy as npimg cv2.imread(D:\Desktop\csdn.png,0) cv2.imshow(binary_Erode2, img) cv2.waitKey(0)&#x1f49c; 腐蚀 &#xff…

Pytest进阶之fixture的使用(超详细)

目录 Fixture定义 Fixture使用方式 作为参数使用 Fixture间相互调用(作为参数调用) 作为conftest.py文件传入 Fixture作用范围Scope function class module session Fixture中params和ids Fixture中autouse Fixture中Name 总结 pytest fixture 是一种用来管理测试…

VMare centos 7 设置固定ip

第一步获取网关 查看虚拟机的网关-》编辑-》虚拟网络编辑器 NAT模式-》NAT设置 获取网关IP 192.168.70.2 第二步获取主机dns1 在本地主机获取dns1&#xff0c;本地主机调出cmd输入ipconfig dns1为192.168.31.1 用管理员权限的账号进入需要设置固定ip的虚拟机&#xff0c;在t…

天猫超市卡有什么用处?

现在买东西不是都有优惠券叠加啥的&#xff0c;完了可以优惠不少钱 前两天我刚在天猫买了点东西&#xff0c;天猫送了我一张猫超卡&#xff0c;刚好手上的积分也兑换了一张100的&#xff0c;这样就有2张卡了 但是把想买的东西加购以后&#xff0c;感觉还不如京东便宜&#xf…

圣贝拉IPO:高榕资本等减持,多次被罚,间接子公司资金链断裂

近日&#xff0c;中国证监会披露《境外发行上市备案补充材料要求&#xff08;2024年7月12日—2024年7月18日&#xff09;》。信息显示&#xff0c;证监会国际司共对3家企业出具补充材料要求&#xff0c;涉及绿茶餐厅&#xff08;绿茶集团&#xff09;、广州星梦&#xff08;星梦…