https://www.tuziki.com/coder/article/6714ef24e9d42916eda727e3? 使用Unocss可以高效处理tailwindcss和icon图标。首先,通过pnpm安装相关依赖,包括Unocss和iconify的工具。然后,在项目根目录创建uno.config.ts配置文件,导入并定义Unocss的配置。配置包括启用默认预设、
后面三个是预设,第一个是常用工具类,第二个是属性化样式支持,第三个是icon支持,一和二基本都要用,三可看情况安装 1|2引入 // vite.config.ts import type { PluginOption, UserConfig } from 'vite' import Vue from '@vitejs/plugin-vue' import Unocss from 'unocss/vite' import { presetAttributif...
可以使用纯css图标,首先还需要下载icon npm install -D @iconify/json 也可以只下载 某一个你要使用的图标 npm install -D @iconify-json/[the-collection-you-want] //或者 yarn add @iconify/json 也可以只下载 某一个你要使用的图标 yarn add @iconify-json/[the-collection-you-want] // uno.config....
npm init vite@latest my-vue-app -- --template vue 使用yarn yarn create vite my-vue-app --template vue 下载Unocss依赖 安装unocss和三个预设,第一个是工具类预设,第二个是属性化模式支持,第三个是icon支持 pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons...
iconfy官方网站 开始引入这个功能,首先在Unocss插件中添加presetIcons预设。 文件名:config/unocss.ts exportdefault() =>Unocss({ safelist,presets: [presetUno(),presetAttributify(),presetIcons(),// 添加图标预设] }); 定制图标安全列表 为了能够在UnoCSS中使用变量定义字体图标,需要将使用的图标名加入到sa...
481 -- 28:22 App Vite配置icon | svg图标 1052 -- 21:56 App nodejs的基础使用 946 -- 21:25 App Vite项目中使用mockjs 2661 -- 16:17 App vue项目中实现页面主题切换 | element-plus暗黑主题 3865 -- 33:29 App 网页设计:HTML+CSS编写猫和老鼠 140 -- 59:50 App 构建IM即时通讯Web页...
使用Unocss 在main.ts 引入 css: import "uno.css"; 下面的代码增加了按钮并加入 mdi 按钮集合的 adb icon: Uno Available 效果如下: 在Login 页面,通过示例代码可以达到以下的效果: 调整分辨率,页面会进行自适应: 此文章为7月Day19学习笔记,内容来源于极客...
feat: 增加图片支持,整站图标改用 unocss icon 方式使用,方便在内网环境使用 Browse files main v4.8.1 … v4.2.0 hooray committed Jan 17, 2024 1 parent 66d9e31 commit 4bccda4 Showing 26 changed files with 80 additions and 131 deletions. Whitespace Ignore whitespace Split Unified...
1.presetIcons Icon图标预设 图标集合安装 npm i -D @iconify-json/ic 1. 首先我们去icones官网(方便浏览和使用iconify)浏览我们需要的icon,比如这里我用到了Google Material Icons图标集里面的baseline-add-circle图标 1. 2.presetAttributify 属性化模式支持 属性语义化 无须class btn ...