关于使用 @iconify/iconify图标库组件在vite中的使用

news2024/11/18 13:49:29

Iconify 是最通用的图标框架,将各种图标库的图标集中在这里的一个组件库,例如ant-design,element-ui等 网站地址如下
https://iconify.design/getting-started/
使用过程如下

npm install @iconify/iconify -S
npm install vite-plugin-purge-icons @iconify/json -D

配置如下
在这里插入图片描述
在入口文件或者使用页面导入下面

// main.js
import '@purge-icons/generated'

在这里插入图片描述
使用案例

 <div :size="16" class="op-btn" @click="copyCode">
            <a-tooltip>
              <template #title>复制代码</template>
              <div><span class="iconify" data-icon="ph:copy" Color="#3451b2" style="font-size:20px"> </span> </div> 
            </a-tooltip>
          </div>

更详细的使用
https://blog.csdn.net/m0_61989957/article/details/129479568

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

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

相关文章

【SpringBoot3】命令行运行jar包报错可能的一些原因

端口号冲突&#xff1a; 有其他的web程序在运行&#xff0c;占用了8080端口没有主清单属性&#xff1a; 在打包jar包前&#xff0c;没有加入打包的插件spring-boot-maven-plugin&#xff0c;参考1.SpringBoot入门的第一个完整小项目&#xff08;新手保姆版教会打包&#xff09;…

Dockerfile与DockerCompose

Docker的Image结构是怎样的&#xff1f; 镜像是将应用程序 及其需要的 系统函数库、环境、配置、依赖 打包而成。 镜像结构 入口&#xff08; Entrypoint &#xff09; 镜像运行入口&#xff0c;一般是程序启动的脚本和参数 层&#xff08; Layer &#xff09; 在BaseImage基…

Alibaba Cloud Linux镜像操作系统详解(全方位解析)

Alibaba Cloud Linux是基于龙蜥社区OpenAnolis龙蜥操作系统Anolis OS的阿里云发行版&#xff0c;针对阿里云服务器ECS做了大量深度优化&#xff0c;Alibaba Cloud Linux由阿里云官方免费提供长期支持和维护LTS&#xff0c;Alibaba Cloud Linux完全兼容CentOS/RHEL生态和操作方式…

Linux 进程(五) 调度与切换

概念准备 当一个进程放在cpu上运行时&#xff0c;是必须要把进程的代码跑完才会进行下一个进程吗&#xff1f;答案肯定是 不对。现在的操作系统都是基于时间片轮转执行的。 时间片&#xff08;timeslice&#xff09;又称为“量子&#xff08;quantum&#xff09;”或“处理器片…

设计模式之原型模式【创造者模式】

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

数据库云平台新数科技完成B轮融资,打造全链路智能化数据库云平台

数据库云平台软件厂商「北京新数科技有限公司」&#xff08;以下简称「新数科技」&#xff09;已于2023年完成B1轮和B2轮融资&#xff0c;分别由渤海创富和彬复资本投资&#xff1b;义柏资本担任本轮融资独家财务顾问。 新数科技成立于2014年&#xff0c;当前产品矩阵包括数据库…

120基于matlab的LMS自适应滤波算法

基于matlab的LMS自适应滤波算法&#xff0c;如、解相关LMS算法&#xff0c;滤波型LMS算法&#xff0c;变换域LMS算法&#xff0c;输出滤波前后及学习曲线图。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 120自适应滤波算法变换域LMS算法 (xiaohongshu.com…

解决Android AAPT: error: resource android:attr/lStar not found. 问题

错误信息 /xxx/gjc/.gradle/caches/transforms-2/files-2.1/930c42acd29d295ce5bc495c3b84423e/core-1.9.0/res/values/values.xml:104:5-113:25: AAPT: error: resource android:attr/lStar not found. not found 资源位置 场景 原Android studio中的项目都是在git上面拉的老项…

cad基础知识1

cad&#xff1a; 点移动会变成线&#xff0c;线移动会变成面&#xff0c;面移动会变成一个实体 f7: 取消cad里的网格 f12: 动态输入 dim&#xff1a;更加智能的标准两端点的距离。 f8:如果按了f8&#xff0c;上下左右都是一条直线&#xff0c;不会变歪。 f9: 开启捕捉模式。 …

实验笔记之——基于windows复现Instant-NGP

之前博客对NeRF-SLAM进行了调研&#xff0c;本博文先复现一下Intant-NGP。 学习笔记之——NeRF SLAM&#xff08;基于神经辐射场的SLAM&#xff09;-CSDN博客文章浏览阅读851次&#xff0c;点赞22次&#xff0c;收藏21次。NeRF 所做的任务是 Novel View Synthesis&#xff08;…

以爱之名,与“EYE”同行 蔡司光学公益行一直在路上

用心传递公益温暖之力&#xff0c;助力更多乡村学童拥有光明未来。2023年12月26日&#xff0c;一场以“EYE”为主题的公益活动正在中卫市宣和镇东台小学举办。本次&#xff0c;眼视光领域领军品牌蔡司光学携手中卫德明眼科的专业视光团队一同来到活动现场&#xff0c;为该校全体…

文件重命名技巧:找到最简单的办法,删除文件名中的下划线

在日常工作中&#xff0c;经常要处理大量的文件&#xff0c;包括重命名文件。有时候可能会遇到文件名中包含下划线的情况&#xff0c;这使得文件名变得复杂且不易读。要简化文件名并使其更易于管理&#xff0c;可以使用一些简单的技巧来删除文件名中的下划线。现在一起来看云炫…

山西电力市场日前价格预测【2024-01-04】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2024-01-04&#xff09;山西电力市场全天平均日前电价为197.93元/MWh。其中&#xff0c;最高日前电价为376.04元/MWh&#xff0c;预计出现在18:15。最低日前电价为0.00元/MWh&#xff0c;预计出…

案例分享:Qt多国语言输入法软键盘

若该文为原创文章&#xff0c;转载请注明出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/135346374 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…

AIGC年度回顾!2024向量数据库是否还是AI发展方向之一?

引言 2023 年&#xff0c;是 AI 技术大爆发的一年&#xff0c;从年初到年末&#xff0c;全球关心技术发展的人们见证了一次次的 AI 技术升级&#xff0c;也逐步加深着对 AGI 发展的畅想。而伴随着生成式人工智能的飞速发展&#xff0c;向量数据库以其独特的技术优势逐渐崭露头角…

第一个Qt程序----Hello word!

从今天起就开始我们的第一个Qt小程序&#xff0c;点击New Project后点击右侧的Application后点击Qt Widgets Application。Qt Widgets 模块提供了一组UI元素用于创建经典的桌面风格的用户界面&#xff0c;Widgets是小部件的意思&#xff0c;也可以称为控件&#xff0c;因此Qt …

OpenHarmony之HDF驱动框架

概述 HDF&#xff08;Hardware Driver Foundation&#xff09;驱动框架&#xff0c;为驱动开发者提供驱动框架能力&#xff0c;包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路&#xff0c;让驱动开发和部署更加规范&#xff0c;旨在…

LeetCode每日一题.06(翻转二叉树)

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1] 示例 3&…

golang学习专栏

GOLANG专栏 Golang基础教程 Golang基础教程 Golang练手算法 Golang练手算法 Golang设计模式 Golang设计模式 Golang数据结构和算法 Golang数据结构和算法 Golang并发编程 Golang并发编程 ORM框架Gorm Golang ORM框架gorm Golang源码分析 Golang源码分析 MySQL教程 MySQ…

Go中interface != nil不一定不是nil

摘要&#xff1a; interface{} 值 ! nil不一定不是nil&#xff0c;应使用reflect库判断是否是nil。 测试示例&#xff1a; // todo interface ! nil 不一定 不是nil var value map[string]interface{} reqMap : make(map[string]interface{}) reqMap["key"] valu…