@neosjs/create-app/template/config/unocss/unocss.config.ts

帮助开发者快速创建Vue3应用并自动配置项目

import { basename, parse, resolve } from 'node:path'
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
import type { Theme } from '@unocss/preset-mini'
import { globSync } from 'glob'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetWind4,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

const svgPath = 'src/assets/svgs'
const getIcons = () => {
  const svgFiles = globSync(`${svgPath}/*.svg`, { nodir: true })
  const icons = svgFiles.map((filePath) => {
    const fileName = basename(filePath) // 获取文件名，包括后缀
    const fileNameWithoutExt = parse(fileName).name // 获取去除后缀的文件名
    return `i-svg:${fileNameWithoutExt}`
  })
  return [...icons]
}
const icons = getIcons()
const svgDirectory = resolve(__dirname, svgPath)

export default defineConfig({
  envMode: process.env.VITE_ENV === 'development' ? 'dev' : 'build',
  shortcuts: [
    {
      'center': 'flex justify-center items-center',
      'flex-v-center': 'flex items-center',
      'flex-h-center': 'flex justify-center',
      'flex-center': 'flex justify-center items-center',
      'text-ellipsis': 'truncate'
    }
  ],
  presets: [
    presetWind4(),
    presetAttributify({ strict: true }),
    presetIcons({
      mode: 'auto',
      autoInstall: false,
      scale: 1,
      unit: 'em',
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle'
      },
      collections: {
        svg: FileSystemIconLoader(svgDirectory, (svg) => {
          const colorfulReg
            = /(?:fill|stroke)="(?!none|#[Ff]{3}(?:[Ff]{3})?|#0{3,}|white|black|rgb\(255,\s*255,\s*255\))[#0-9a-fA-F]+"/

          if (colorfulReg.test(svg)) {
            return svg
          }

          const whiteReg
            = /(fill|stroke)="(?:#[Ff]{3}(?:[Ff]{3})?|rgb\(255,\s*255,\s*255\)|white)"/g
          return svg.replace(whiteReg, '$1="currentColor"')
        })
      }
    })
  ],
  theme: <Theme>{
    colors: {
      blue: 'var(--color-blue)',
      green: 'var(--color-green)',
      red: 'var(--color-red)',
      yellow: 'var(--color-yellow)',
      orange: 'var(--color-orange)',
      pink: 'var(--color-pink)'
    }
  },
  transformers: [
    transformerDirectives(),
    transformerVariantGroup()
  ],
  safelist: icons.map(icon => `${icon} ${icon}?mask`.split(' ')).flat()
})