fix: css icon run error

This commit is contained in:
Joel 2026-01-30 11:05:50 +08:00
parent 2e63e20131
commit e8f45a9685
1 changed files with 12 additions and 129 deletions

View File

@ -1,10 +1,5 @@
import type { IconifyJSON } from '@iconify/types'
import fs from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons'
import { cleanupSVG, deOptimisePaths, importDirectorySync, isEmptyColor, parseColors, runSVGO } from '@iconify/tools'
import { compareColors, stringToColor } from '@iconify/utils/lib/colors'
import tailwindTypography from '@tailwindcss/typography'
// @ts-expect-error workaround for turbopack issue
import tailwindThemeVarDefine from './themes/tailwind-theme-var-define.ts'
@ -14,118 +9,6 @@ const _dirname = typeof __dirname !== 'undefined'
? __dirname
: path.dirname(fileURLToPath(import.meta.url))
// https://iconify.design/docs/articles/cleaning-up-icons/
function getIconSetFromDir(dir: string, prefix: string) {
// Import icons
const iconSet = importDirectorySync(dir, {
prefix,
ignoreImportErrors: 'warn',
})
// Validate, clean up, fix palette and optimise
iconSet.forEachSync((name, type) => {
if (type !== 'icon')
return
const svg = iconSet.toSVG(name)
if (!svg) {
// Invalid icon
iconSet.remove(name)
return
}
// Clean up and optimise icons
try {
// Clean up icon code
cleanupSVG(svg)
// Change color to `currentColor`
// Skip this step if icon has hardcoded palette
const blackColor = stringToColor('black')!
const whiteColor = stringToColor('white')!
parseColors(svg, {
defaultColor: 'currentColor',
callback: (attr, colorStr, color) => {
if (!color) {
// Color cannot be parsed!
throw new Error(`Invalid color: "${colorStr}" in attribute ${attr}`)
}
if (isEmptyColor(color)) {
// Color is empty: 'none' or 'transparent'. Return as is
return color
}
// Change black to 'currentColor'
if (compareColors(color, blackColor))
return 'currentColor'
// Remove shapes with white color
if (compareColors(color, whiteColor))
return 'remove'
// Icon is not monotone
return color
},
})
// Optimise
runSVGO(svg)
// Update paths for compatibility with old software
deOptimisePaths(svg)
}
catch (err) {
// Invalid icon
console.error(`Error parsing ${name}:`, err)
iconSet.remove(name)
return
}
// Update icon
iconSet.fromSVG(name, svg)
})
// Export
return iconSet.export()
}
function getCollectionsFromSubDirs(baseDir: string, prefixBase: string): Record<string, IconifyJSON> {
const collections: Record<string, IconifyJSON> = {}
function processDir(dir: string, prefix: string): void {
const entries = fs.readdirSync(dir, { withFileTypes: true })
const subDirs = entries.filter(e => e.isDirectory())
const svgFiles = entries.filter(e => e.isFile() && e.name.endsWith('.svg'))
// Process SVG files in current directory if any
if (svgFiles.length > 0) {
collections[prefix] = getIconSetFromDir(dir, prefix)
}
// Recurse into subdirectories if any
if (subDirs.length > 0) {
for (const subDir of subDirs) {
const subDirPath = path.join(dir, subDir.name)
const subPrefix = `${prefix}-${subDir.name}`
processDir(subDirPath, subPrefix)
}
}
}
// Read top-level subdirectories and process each
const entries = fs.readdirSync(baseDir, { withFileTypes: true })
for (const entry of entries) {
if (entry.isDirectory()) {
const subDirPath = path.join(baseDir, entry.name)
const prefix = `${prefixBase}-${entry.name}`
processDir(subDirPath, prefix)
}
}
return collections
}
const config = {
theme: {
typography,
@ -278,18 +161,18 @@ const config = {
},
plugins: [
tailwindTypography,
iconsPlugin({
collections: {
...getCollectionsFromSubDirs(path.resolve(_dirname, 'app/components/base/icons/assets/public'), 'custom-public'),
...getCollectionsFromSubDirs(path.resolve(_dirname, 'app/components/base/icons/assets/vender'), 'custom-vender'),
...getIconCollections(['heroicons', 'ri']),
},
extraProperties: {
width: '1rem',
height: '1rem',
display: 'block',
},
}),
// iconsPlugin({
// collections: {
// ...getCollectionsFromSubDirs(path.resolve(_dirname, 'app/components/base/icons/assets/public'), 'custom-public'),
// ...getCollectionsFromSubDirs(path.resolve(_dirname, 'app/components/base/icons/assets/vender'), 'custom-vender'),
// ...getIconCollections(['heroicons', 'ri']),
// },
// extraProperties: {
// width: '1rem',
// height: '1rem',
// display: 'block',
// },
// }),
],
// https://github.com/tailwindlabs/tailwindcss/discussions/5969
corePlugins: {