unocss 添加支持使用本地 svg 预设图标,并支持更改大小

安装 pnpm install @iconify/utils

在配置文件 unocss.config.tspresets > presetIcons 选项中

通过 FileSystemIconLoader 加载本地图标,并指定目录。

ts 复制代码
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-weapp
    presetWeapp(
      {
        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 mode
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    // 用于转换 微信小程序 不支持的 \\,\: \[ \$ \. 等转义类名, 实现在小程序中使用原子化css
    transformerClass(),
  ],
  theme: {
    color: {
      bg: 'rgba(22, 33, 255, 1)',
    },
  },
})

使用:

相关推荐
tekin23 天前
图解 微信开发者工具 小程序源码 调试、断点标记方法 , 微信小程序调试器,真机调试断点调试方法,小程序网络API请求调试方法 总结
微信小程序·debug·调试·断点·真机调试·miniapp·网络api请求调试方法
晓风伴月2 个月前
微信小程序引入unocss
微信小程序·unocss
YuShiYue5 个月前
vite配置unocss
vue3·vite·unocss·原子化css
会思想的苇草i1 年前
UnoCSS快速入门
前端·css·unocss·原子类
UzumakiHan1 年前
关于Vue+webpack使用unocss编写CSS,打包后CSS没加前缀
vue.js·webpack·unocss
少年歌行s1 年前
【unocss】apply聚合语法,unocss配置
前端·css·uni-app·unocss
你的微笑、暖暖的1 年前
一个十分好用且美观的vue3后台管理系统框架
typescript·vue·vite·unocss·后台管理
蜕.1 年前
vscode插件unocss无法正常使用
vscode·编辑器·unocss