安装 pnpm install @iconify/utils
在配置文件 unocss.config.ts
: presets
> presetIcons
选项中
通过 FileSystemIconLoader 加载本地图标,并指定目录。
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defineConfig, presetIcons } from 'unocss'const { presetWeappAttributify, transformerAttributify } = extractorAttributify()import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders' // 支持通过 iconify 加载本地 svg 图标
export default defineConfig({presets: [// https://github.com/MellowCo/unocss-preset-weapppresetWeapp({isH5: process.env.TARO_ENV === 'h5',platform: 'taro',// 通过设置 taroWebpack 版本,指定 rem 策略taroWebpack: 'webpack5',// designWidth: 375,designWidth: 750,deviceRatio: {640: 2.34 / 2,750: 1,828: 1.81 / 2,375: 2 / 1},},),presetWeappAttributify(),// 预设图标presetIcons({// 添加 '$1"1em" ,支持动态改变图标大小collections: {// 不同模块,自定义图标前缀tender: FileSystemIconLoader('./src/assets/svg-icon/tenderDetail', svg => svg.replace(/(<svg.*?width=)"(.*?)"/, '$1"1em"').replace(/(<svg.*?height=)"(.*?)"/, '$1"1em"')),// appSvg: FileSystemIconLoader('./src/assets/svg-icon', svg => svg// .replace(/(<svg.*?width=)"(.*?)"/, '$1"1em"').replace(/(<svg.*?height=)"(.*?)"/, '$1"1em"')),// ...}}),],shortcuts: [{'border-base': 'border border-gray-500/10','center': 'flex justify-center items-center',},],transformers: [// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify// 支持在小程序中使用 attributify modetransformerAttributify(),// https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass// 用于转换 微信小程序 不支持的 \\,\: \[ \$ \. 等转义类名, 实现在小程序中使用原子化csstransformerClass(),],theme: {color: {bg: 'rgba(22, 33, 255, 1)',},},
})
使用: