@neosjs/create-app
Version:
帮助开发者快速创建Vue3应用并自动配置项目
88 lines (83 loc) • 2.67 kB
text/typescript
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,
presetUno,
presetWind,
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: [
presetUno(),
presetWind(),
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)',
'gray-0': 'var(--color-gray-0)',
'gray-1': 'var(--color-gray-1)',
'gray-2': 'var(--color-gray-2)',
'gray-3': 'var(--color-gray-3)',
'gray-4': 'var(--color-gray-4)',
'gray-5': 'var(--color-gray-5)',
'gray-6': 'var(--color-gray-6)'
}
},
transformers: [transformerDirectives(), transformerVariantGroup()],
safelist: icons.map((icon) => `${icon} ${icon}?mask`.split(' ')).flat()
})