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

这篇具有很好参考价值的文章主要介绍了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日
    浏览(42)
  • vue2+vue-cli使用unocss

    执行命令: 我的安装的版本是: 在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件,你可以定制化 UnoCSS 的行为,例如定义主题样式、配置插件、启用或禁用特定功能等。 在 Vue CLI 项目中,默认情况下,你应该在根目录

    2024年02月12日
    浏览(56)
  • vue 项目中使用阿里巴巴矢量图标库

    1.网址:https://www.iconfont.cn/ 2.手动创建自己的项目图标库 选中图标 → 添加入库(点击购物车)→ 完成后点击上方菜单栏的购物车 → 添加至项目(没有则新建项目)→ 自动打开项目图标库 → 点击下载至本地 → 点击demo包的demo_index.html,上面有三种使用方式,分别是Unicode、

    2024年02月15日
    浏览(64)
  • Unocss(原子化css) 使用(vue3 + vite + ts)

    首先初始化一个vite项目 使用pnpm安装 使用npm 安装 使用yarn 下载Unocss依赖 安装unocss和三个预设,第一个是工具类预设,第二个是属性化模式支持,第三个是icon支持 在vite.config.ts中引入 最后在main.ts中引入uno.css 然后就是使用 最后的效果展示 例如查询颜色为red, 使用可以使用

    2024年02月06日
    浏览(73)
  • vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具

    目录 引言 1、引用百度地图 2、在项目中使用百度地图 2-1、页面结构部分 2-2、js逻辑部分 3-1、页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在平易近人、灵活且可扩展,重点是声明式渲染和基于组件的架构。Vue 的反应性和可组合性使其成为开发复

    2024年01月16日
    浏览(38)
  • electron+vue3全家桶+vite项目搭建【24】设置应用图标,打包文件的图标

    demo项目地址 在electron中,我们可以通过electron-builder的配置文件来设置打包后的应用图标 因为mac环境下的图标需要特殊格式,这里我们可以利用electron-icon-builder进行配置 1.引入相关依赖 加入安装过程中卡在了 phantomjs-2.1.1-windows.zip的下载,可以直接去github上下载 这里我也放一

    2024年02月17日
    浏览(64)
  • 基于原子化思想的 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日
    浏览(46)
  • Vue3 项目引入阿里 iconfont 图标和字体

    需求: 将 iconfont 阿里图标库的图标与字体引入到我们的 Vue3 + vite + TS 项目中来! 我们使用图标的方式有很多种,比如说直接使用 png、jpg 等图片格式,这是最原始的方式,所以我们这里不过多阐述,它们的优缺点相信大家也知道。 这里我们主要对比阿里图标库提供 3 种图标

    2024年02月03日
    浏览(49)
  • vue项目 设置浏览器地址栏图标及名称

    1.1将需要展示的 ico 放到项目文件中 1.2在项目根目录public文件中的 index.html 添加如下代码 项目根目录下 没有 public文件夹 时, 我们来看vue项目的目录结构,根目录下有一个 index.html ,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在 index.html 的 head标签

    2024年04月13日
    浏览(75)
  • 小白详解Vue3项目中怎么引入 SVG 图标

    今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程 SVG 图标 既然是页面,肯定离不开一些图标 icon ,所以肯定要去最全的 阿里图标库 来寻找 这里讲解下如何将 阿里图标库 里面的东西,放到我们的页面上 阿里图标库 进入页面,找到 资源管理 下面的 我的

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包