vue 项目配置 unocss

一、安装

在终端输入如下面命令,下载三个包在 devDependencies 里

pnpm i -D @iconify/json unocss sass
二、配置

在 vite.config.ts 文件中配置

import {presetUno,presetIcons} from 'unocss'
import unocss from 'unocss/vite'
export default defineConfig({
  plugins: [vue(),unocss({
    presets:[presetUno(),presetIcons()]
  })],
})

在 main.ts 文件中引入

import 'uno.css'
三、使用

在需要用到 icon 图标的 vue 文件中新建 div ,class 中 "i-" 加上图标的标签即可显示

<div class="i-uil:laughing text-red-600 text-7xl mx-auto"></div>

uil:laughing:图标标签

text-red-600:图标的颜色编号

text-7xl:图标大小

mx-axto:居中显示图标

上面的方法是直接在 tailwindcss 中选择颜色,还有一种设置图标颜色的写法如下:

<div class="i-uil:laughing text-[#9ca3af] text-7xl mx-auto"></div>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值