unocss

https://juejin.cn/post/7028841960752283656

vite使用

pnpm i -D unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

配置预设

以@unocss/preset-uno预设为例

javascript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Unocss from 'unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [
          presetUno(), 
          presetAttributify(), 
          presetIcons()],
    }),
  ],
})

javascript

import { createApp } from 'vue'
import App from './App.vue'

import 'uno.css'

createApp(App).mount('#app')

图标

https://icones.js.org/

根据官网物料icon找到对应分类，安装对应分类的icon

pnpm i -D @iconify-json/ic

使用

图标的使用语法是

i+${图标集缩写名}+${图标名}，

这里的图标集是ic，图标名是baseline-add-circle

i-fxemoji-circledideographaccept