npm i -d unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons 后面三个是预设,第一个是常用工具类,第二个是属性化样式支持,第三个是icon支持,一和二基本都要用,三可看情况安装 1|2引入 // vite.config.ts import type { PluginOption, UserConfig } from 'vite' import Vu...
使用Unocss可以高效处理tailwindcss和icon图标。首先,通过pnpm安装相关依赖,包括Unocss和iconify的工具。然后,在项目根目录创建uno.config.ts配置文件,导入并定义Unocss的配置。配置包括启用默认预设、精简实用工具类、Attributify模式、图标支持等,还定义了快捷书写方式和转换器。这样,就可以在页面上方便地使用类似Tailwind...
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...
可以使用纯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....
iconfy官方网站 开始引入这个功能,首先在Unocss插件中添加presetIcons预设。 文件名:config/unocss.ts exportdefault() =>Unocss({ safelist,presets: [presetUno(),presetAttributify(),presetIcons(),// 添加图标预设] }); 定制图标安全列表 为了能够在UnoCSS中使用变量定义字体图标,需要将使用的图标名加入到sa...
使用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图标 代码解读
打开上面页面的时候,查看一下地址栏:https://icones.js.org/collection/ic,记住后面的ic,这个图集的库名称为:@iconify-json/ic。图标的使用语法是:i+图集缩写+图标名,例如:i-ic-baseline-add-circle。 引入unocss 在vite.config.ts中引入 复制 importUnocssfrom 'unocss/vite'import{presetUno,presetAttributif...