工程化:vite3+vue3中封装svgicon组件(二)--添加iconify图标

已于 2024-06-07 16:37:21 修改
阅读量735 收藏
点赞数
分类专栏： 前端框架深度研究-vben vue2/vue3 文章标签： javascript vue.js 前端
于 2022-12-13 06:16:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/128295845
版权

icon组件使用方式很多，当没有设计师给我们提供图标的时候，我们可以借助第三方的插件，比较有名的有iconfont,今天推荐另外一种图标库及使用方法

实际效果

在这里插入图片描述

依赖安装

yarn add @iconify/iconify @purge-icons/generated

组件封装

1.改造上一节的icon组件

...
<span
    v-else
    ref="elRef"
    :class
了解本专栏 订阅专栏 解锁全文 超级会员免费看
风清云淡_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
iconify图标使用
m0_61989957的博客
03-12 4258
iconify图标 离线使用
【前端】从vben中学到的一些工程化技巧
等时钟成长
04-19 2343
文章目录本地图标还是在线图标可更改的 API 服务地址 记录一些使用vben时学习到的新的技巧。 本地图标还是在线图标 使用 iconify，是从线上的 Public host 获取图标，当需要本地化（如部署到局域网内），可以借用 purgeIcons 来实现。 对于 vite 有相应的插件 vite-plugin-purge-icons // vite.config.js import PurgeIcons from 'vite-plugin-purge-icons'; return { plugin
iconify图标集离线使用方案简介
honor_zhang的博客
12-25 2369
本文是在项目部署内网时，图标加载不出来的背景下，自己找解决方案的一个总结。由于一般的项目需要使用的图表是很多的，所以，单个引入离线图标（如下图所示）是解决不了实际问题的。最后在Pure Admin项目文档以及作者的视频帮助下，部署了离线方案，然后自己加入Nginx方案代理，实现了自己项目的iconify图标集的离线使用。本文是自己实现方案的一个总结，如有不妥之处，欢迎批评指正。
@iconify/vue离线引入图标
lidong0101的博客
05-10 561
以引入 element-plus 图标为例。现在 package.json 引入。然后写个组件 Icons。然后在调用的地方引入组件。
解决@purge-icons使用出现的问题
lianlin21212411的博客
06-14 8988
最近项目基于vben-admin进行改造 该项目中的图标全部使用的@purge-icons，首先看一下官网介绍在开发项目时我在中找到一个图标并使用，但是再打包后部署到内网环境时，该图标并未显示，因此我开始对改项目的源码研究。在外网开发时也发现，该图标会产生网络请求，然后得到svg路径，最终绘出图标。 之后根据网络请求追踪到发送请求的位置， 从代码上看应该是@iconify组件主动将从服务器拉取。？？？难道这项目不能离线部署吗当然不是，重新刷新页面发现了一个现象，，这段代码一直被调用 这是怎么回事，通过查看调
Vue使用iconify图标
sg_knight的专栏
03-30 6095
1、安装插件purge-icons-webpack-plugin yarn add purge-icons-webpack-plugin -D 或者 npm i purge-icons-webpack-plugin -D 2、配置插件 在vue.config.js文件中配置插件使用。 // vue.config.js const { PurgeIcons } = require('purge-icons-webpack-plugin'); module.exports = { .
关于使用 @iconify/iconify图标库组件在vite中的使用
dongheng123的博客
01-03 1954
图标库
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
vue3-element-admin-ts::party_popper: 基于 vite + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus+Typescript 的后台管理系统vue3-element-admin-ts
04-07
vue3-element-admin:party_popper: 基于 vite + vue3 + Vue-Router 4.0 + Vuex 4.0 + element-plus + typescript 的后台管理系统简介 是一个后台前端解决方案，它基于 和 实现。它使用了最新的前端技术栈，vite + ...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
在现代前端开发中，Vue3 和 Vite5 的结合提供了高效、快速的开发体验。Vite 是由 Vue.js 作者尤雨溪开发的一款新型构建工具，它利用了 ES 模块的原生加载能力，实现了热更新和按需编译，极大地提升了开发效率。Vue3 ...
vite-plugin-svg-icons:Vite插件可快速创建SVG精灵
03-06
vite-plugin-svg-icons English | 用于生成svg精灵图。 特征 预加载项目运行时会生成所有图标，并且只需要操作一次dom。 高性能的内置缓存，只有在修改文件后才会重新生成。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-svg-icons -D 或者 npm i vite-plugin-svg-icons -D 用法 vite.config.ts中的配置插件 import viteSvgIcons from 'vite-plugin-svg-icons' ; import path from 'path' ; export default ( ) => { return { plugins : [ viteSvgIcons ( {
tiny-evt:Vite2 + Vue3 + Electron12 + TypeScript
05-03
、包含自动化测试构建依赖列表DependenceCategoryRequiredVersionInformationvuetrue3.0.8vue-router4.0.5cypressdev4.12.1测试工具spectrondev14.0.0测试工具@vue/test-utilsdev2.0.0-rc.4测试工具jestdev26.6.3...
【vite插件】iconify字体图标离线加载
u013675821的博客
03-15 1415
【代码】【vite插件】iconify字体图标离线加载。
推荐项目：PurgeIcons — 精确打包你的图标资源
最新发布
gitblog_00032的博客
05-28 443
推荐项目：PurgeIcons — 精确打包你的图标资源 项目地址:https://gitcode.com/antfu/purge-icons 在如今的前端开发中，图标库是不可或缺的一部分。然而，随之而来的问题是如何有效地管理和减少未使用的图标对资源的浪费。为解决这一问题，我们向您推荐一个创新项目——PurgeIcons。它借鉴了PurgeCSS的理念，只打包并引入你在项目中实际使用的图标，从而实...
vue3+vite+ts 图标封装3种方案
qq_20663639的博客
08-29 3782
Vue3+Vite图标封装3种方案
vue3项目中使用vite-plugin-svg-icons插件
weixin_43676252的博客
12-28 519
那么 svg格式的图片，可以通过插件打包成svg地图，通过ID来使用，一次加载，动态使用，图片无需懒加载，真实项目中，其实可以把下面这段代码封装成一个组件来使用，就不用占用3行位置了。png格式的图片可以合成精灵图，然后根据定位使用。完成以上操作，就可以在页面中正确展示svg图片了。
vite+vue3中使用iconfont的svg图标
weixin_52020362的博客
09-21 987
vue项目中使用iconfont图标
Vue3 + vite + ElementUI 自定义 svg 图标
qq_42026600的博客
04-13 1483
Vue3 + vite + ElementUI 自定义 svg 图标
vite-plugin-purge-icons
07-28
vite-plugin-purge-icons 是一个用于 Vite 构建工具的插件，用于自动删除未使用的 SVG 图标。它可以帮助减小构建产物的体积，优化性能。该插件会分析你的项目中的代码，找出未使用的 SVG 图标，并将其从最终构建结果中删除。 使用 vite-plugin-purge-icons 需要在 Vite 项目中进行安装和配置。你可以通过以下步骤来使用该插件： 1. 在项目根目录下执行以下命令安装 vite-plugin-purge-icons： ```shell npm install vite-plugin-purge-icons --save-dev ``` 2. 在 Vite 的配置文件中（一般为 vite.config.js 或 vite.config.ts）引入并使用该插件： ```javascript import purgeIcons from 'vite-plugin-purge-icons'; export default { plugins: [ // 其他插件... purgeIcons(), ], }; ``` 3. 配置完成后，重新启动 Vite 开发服务器或执行构建命令，vite-plugin-purge-icons 将会分析你的代码并删除未使用的 SVG 图标。 请注意，vite-plugin-purge-icons 目前仅支持 Vite 2.x 版本。如果你使用的是其他构建工具或版本，请查看对应的插件或方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值