mirror of https://github.com/langgenius/dify.git
fix: css icon run error
This commit is contained in:
parent
2e63e20131
commit
e8f45a9685
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue