当前位置: 首页 > news >正文

vue3+vite接入iconify,支持离线

前言

找一个图标太难了。Element-plus Icon的不够用。阿里巴巴的iconfont又比较麻烦。如果有自己的UI组件也可以考虑。
为了快速开发,我选择unocss + iconify。
网上的教程太多了,建议大家直接看文档,其实配置步骤只有几步,不多。
文档中也有需要理解的部分,以下是我安装的一个总结,方便下次直接安装总结进行安装。

配置unocss

原文:https://unocss.net/integrations/vite
安装依赖

pnpm add -D unocss

配置vite.comfig.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'export default defineConfig({plugins: [UnoCSS()]
})

创建 uno.config.ts 文件:

import { defineConfig } from 'unocss'export default defineConfig({// ...这里什么也不写,说明走默认配置。注意:引入图标这里的默认配置会被覆盖,需要显示声明
})

将 virtual:uno.css 添加到您的主入口文件:

import 'virtual:uno.css'

引入iconify图标

// 图标集合地址:https://icon-sets.iconify.design/ic/
pnpm add -D @unocss/preset-icons @iconify-json/ic
// pnpm add -D @unocss/preset-icons @iconify-json/[你想要的集合]
import presetIcons from '@unocss/preset-icons'
import { defineConfig, presetAttributify, presetUno } from 'unocss'export default defineConfig({presets: [presetIcons({// 可选-属性预设presetAttributify({}),// 核心-原子化预设presetUno(),// 图标预设presetIcons({})})// ...其他预设]
})

打开图标库,我这里使用的是google图标。https://icon-sets.iconify.design/ic/
在这里插入图片描述
将这个html粘贴进项目,页面上会显示图标。

 <div class="i-ic:twotone-flaky w-24px h-24px" />

由于是懒加载,动态会不显示。

可以参考这里:https://www.whidy.net/unocss-dynamic-icon-not-show

创建一个单独的文件在src目录下,比如叫做 unocss-icon.ts ,然后再在 main.ts 内引入就好了。这完全取决于你的喜好~

// unocss-icon.ts
// @unocss-include
const iconList = ["i-mdi-poll", "i-mdi-monitor-dashboard", "i-mdi-ballot-recount-outline","i-mdi-application-brackets-outline","i-mdi-apache-kafka", "i-mdi-archive-search-outline", "i-mdi-format-text-wrapping-overflow"
];
// main.js
// 添加一行
import "./unocss-icon";

http://www.mrgr.cn/news/79920.html

相关文章:

  • kv类型算子使用
  • 【Flux.jl】 卷积神经网络
  • 企业级包管理器之搭建 npm 私有服务器 (6)
  • 什么是多线程中的上下文切换
  • ubuntu16.04部署dify教程
  • QT 中使用 QTableView 和 QStandardItemModel 实现将数据导出到Excel 和 从Excel导入到 QTableView 的功能
  • Docker的初识
  • IP研究 | 大数据洞察黄油小熊的爆火之路
  • 【数字花园】个人知识库网站搭建:②本地部署数字花园
  • 原生微信小程序使用原子化tailwindcss
  • 【数据结构——查找】顺序查找(头歌实践教学平台习题)【合集】
  • Ultra-Fast-Lane-Detection复现、部署及训练
  • kill crash原因分析
  • C++ 泛编程 —— 函数模板(中)
  • rman 迁移数据到其他机器实际实验
  • hive—常用的日期函数
  • ES6 混合 ES5学习记录
  • 【数据结构——栈与队列】链栈的基本运算(头歌实践教学平台习题)【合集】
  • 【蓝桥杯每日一题】砍竹子
  • 黑马商城微服务复习(6)
  • MVC配置文件及位置
  • 【C语言】浮点数的原理、整型如何转换成浮点数
  • 计算机组成原理复习
  • 【漏洞复现】CVE-2022-26619 CVE-2022-32994 Arbitrary File Upload
  • 多发电站实现光伏发电预测的统一管理模式
  • CSDN原力值说明