unocss+iconify技术在vue项目中使用20000+的图标

1年前作者：美酒没故事°分类：Toy博客阅读(11)违法举报

这篇具有很好参考价值的文章主要介绍了unocss+iconify技术在vue项目中使用20000+的图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

安装依赖

npm i unocss @iconify/json

配置依赖

vue.config.js文件

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

uno.config.js文件

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

main.js文件

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

使用图标

<i class="i-fa:user"></i>
<i class="i-fa:key"></i>

使用公式 i-库名:图标名，class名是 i- 开头，跟库名:图标名，那都有什么库？什么图标？在https://icones.js.org/

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

找几个看看

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

记得加 i- 哦，i-库名:图标名

效果

看，是异步加载svg的图标
unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

动态渲染的问题

动态渲染的标签出不来图标，比如动态渲染的权限菜单栏、或者js创建的标签出不来，不过也有解决办法，就2步

下载到本地

建议下载图标比较多的、全面的图库，因为这样使用选择的范围就广泛，比如arcticons、Phosphor 、Pictogrammers、solar等

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

自己处理成 ["i-库名:图标名", "i-库名:图标名", "i-库名:图标名"] 这种格式的 json

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

配置uno safelist

我以FontAwesome4为例：

unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript

出来了
unocss+iconify技术在vue项目中使用20000+的图标,辅助撸码,vue.js,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-807738.html

到了这里，关于unocss+iconify技术在vue项目中使用20000+的图标的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify
iconfont是过去使用较多的图标方案，后来更倾向于使用SVG，因为SVG更灵活兼容性更好。在最近的几个Vue2项目中，因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。 Element Plus的图标库相对Element UI更加丰富，然而对于喜欢折腾的人还是远远不够的，在我折腾的
2024年02月04日
浏览(15)
vue2+vue-cli使用unocss
执行命令：我的安装的版本是：在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件，你可以定制化 UnoCSS 的行为，例如定义主题样式、配置插件、启用或禁用特定功能等。在 Vue CLI 项目中，默认情况下，你应该在根目录
2024年02月12日
浏览(73)
vue 项目中使用阿里巴巴矢量图标库
1.网址：https://www.iconfont.cn/ 2.手动创建自己的项目图标库选中图标 → 添加入库（点击购物车）→ 完成后点击上方菜单栏的购物车 → 添加至项目（没有则新建项目）→ 自动打开项目图标库 → 点击下载至本地 → 点击demo包的demo_index.html，上面有三种使用方式，分别是Unicode、
2024年02月15日
浏览(13)
Unocss(原子化css) 使用(vue3 + vite + ts)
首先初始化一个vite项目使用pnpm安装使用npm 安装使用yarn 下载Unocss依赖安装unocss和三个预设，第一个是工具类预设，第二个是属性化模式支持，第三个是icon支持在vite.config.ts中引入最后在main.ts中引入uno.css 然后就是使用最后的效果展示例如查询颜色为red, 使用可以使用
2024年02月06日
浏览(61)
vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录引言 1、引用百度地图 2、在项目中使用百度地图 2-1、页面结构部分 2-2、js逻辑部分 3-1、页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在平易近人、灵活且可扩展，重点是声明式渲染和基于组件的架构。Vue 的反应性和可组合性使其成为开发复
2024年01月16日
浏览(17)
electron+vue3全家桶+vite项目搭建【24】设置应用图标，打包文件的图标
demo项目地址在electron中，我们可以通过electron-builder的配置文件来设置打包后的应用图标因为mac环境下的图标需要特殊格式，这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载，可以直接去github上下载这里我也放一
2024年02月17日
浏览(63)
基于原子化思想的 Vue3 组件库 UnoCSS UI
Github 地址：https://github.com/cherryful/unocss-ui example 预览地址：https://cherryful.github.io/unocss-ui/ 基于 UnoCSS UI 的开源项目： vue3-template：一个轻量级的 Vue3 启动模板，自带 Unocss UI rabbit-admin：一个基于 Golang 和 Vue3 的轻量级全栈后台管理模板 UnocssUI 是一个基于 UnoCSS 带有原子化思想的
2024年02月09日
浏览(32)
vue项目设置浏览器地址栏图标及名称
1.1将需要展示的 ico 放到项目文件中 1.2在项目根目录public文件中的 index.html 添加如下代码项目根目录下没有 public文件夹时，我们来看vue项目的目录结构，根目录下有一个 index.html ，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在 index.html 的 head标签
2024年04月13日
浏览(11)
Vue3 项目引入阿里 iconfont 图标和字体
需求：将 iconfont 阿里图标库的图标与字体引入到我们的 Vue3 + vite + TS 项目中来！我们使用图标的方式有很多种，比如说直接使用 png、jpg 等图片格式，这是最原始的方式，所以我们这里不过多阐述，它们的优缺点相信大家也知道。这里我们主要对比阿里图标库提供 3 种图标
2024年02月03日
浏览(15)
小白详解Vue3项目中怎么引入 SVG 图标
今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程 SVG 图标既然是页面，肯定离不开一些图标 icon ，所以肯定要去最全的阿里图标库来寻找这里讲解下如何将阿里图标库里面的东西，放到我们的页面上阿里图标库进入页面，找到资源管理下面的我的
2024年02月09日
浏览(9)