用UnoCSS加载iconify图标

更新时间:2024-10-19 10:04:31 阅读:180 所属栏目: 日志

注意:请一定要将package.json的type类型设置为 module

首先加载一个unocss

pnpm安装unocss

pnpm add -D unocss

配置vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

配置unocss

安装unocss要用到的iconify资源库 这里全部安装

pnpm add -D @iconify/json

配置unocss.config.ts

import { defineConfig, presetIcons, presetUno } from "unocss";

export default defineConfig({
  presets: [
    presetUno(), // 样式预设方案
    presetIcons({
      // 图标处理器参数
      extraProperties: {// 图标样式
          display: "inline-block",
          "vertical-align": "middle"
      }
    }),
  ],
});

使用iconify图标

main.ts中导入

import 'virtual:uno.css'

iconify图标库选择一个UnoCSS图标然后在任意文件中使用

图片

有一个规律:前缀+图标库:图标 -> 转换为 i-图标库:名称

uis:align-center 应该为 i-uis:align-center

<template>
  <div>
    <div class="i-material:symbols-light-10k"/>
    <span class="i-material:symbols-light-10k"/>
  </div>
</template>