set to warn

This reverts commit 2fc02bf1bc.

web/eslint-rules/index.js

@@ -3,6 +3,7 @@ import noAsAnyInT from './rules/no-as-any-in-t.js'
 import noExtraKeys from './rules/no-extra-keys.js'
 import noLegacyNamespacePrefix from './rules/no-legacy-namespace-prefix.js'
 import noVersionPrefix from './rules/no-version-prefix.js'
+import preferTailwindIcon from './rules/prefer-tailwind-icon.js'
 import requireNsOption from './rules/require-ns-option.js'
 import validI18nKeys from './rules/valid-i18n-keys.js'
 
@@ -18,6 +19,7 @@ const plugin = {
     'no-extra-keys': noExtraKeys,
     'no-legacy-namespace-prefix': noLegacyNamespacePrefix,
     'no-version-prefix': noVersionPrefix,
+    'prefer-tailwind-icon': preferTailwindIcon,
     'require-ns-option': requireNsOption,
     'valid-i18n-keys': validI18nKeys,
   },

web/eslint-rules/rules/prefer-tailwind-icon.js

@@ -0,0 +1,349 @@
+/**
+ * Default prop-to-class mappings
+ * Maps component props to Tailwind class prefixes
+ */
+const DEFAULT_PROP_MAPPINGS = {
+  size: 'size',
+  width: 'w',
+  height: 'h',
+}
+
+/**
+ * Default icon library configurations
+ */
+const DEFAULT_ICON_CONFIGS = [
+  {
+    // @remixicon/react
+    pattern: '@remixicon/react',
+    prefix: 'i-ri-',
+    iconFilter: name => name.startsWith('Ri'),
+    transformName: (iconName) => {
+      // RiApps2AddLine -> apps-2-add-line
+      const withoutPrefix = iconName.slice(2) // Remove 'Ri'
+      return withoutPrefix
+        .replace(/([a-z])(\d)/g, '$1-$2')
+        .replace(/(\d)([a-z])/gi, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+    },
+  },
+  {
+    // @heroicons/react/20/solid
+    pattern: '@heroicons/react/20/solid',
+    prefix: 'i-heroicons-',
+    suffix: '-20-solid',
+    iconFilter: name => name.endsWith('Icon'),
+    transformName: (iconName) => {
+      // ChevronDownIcon -> chevron-down
+      const withoutSuffix = iconName.slice(0, -4) // Remove 'Icon'
+      return withoutSuffix
+        .replace(/([a-z])(\d)/g, '$1-$2')
+        .replace(/(\d)([a-z])/gi, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+    },
+  },
+  {
+    // @heroicons/react/24/solid
+    pattern: '@heroicons/react/24/solid',
+    prefix: 'i-heroicons-',
+    suffix: '-24-solid',
+    iconFilter: name => name.endsWith('Icon'),
+    transformName: (iconName) => {
+      const withoutSuffix = iconName.slice(0, -4)
+      return withoutSuffix
+        .replace(/([a-z])(\d)/g, '$1-$2')
+        .replace(/(\d)([a-z])/gi, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+    },
+  },
+  {
+    // @heroicons/react/24/outline
+    pattern: '@heroicons/react/24/outline',
+    prefix: 'i-heroicons-',
+    suffix: '-24-outline',
+    iconFilter: name => name.endsWith('Icon'),
+    transformName: (iconName) => {
+      const withoutSuffix = iconName.slice(0, -4)
+      return withoutSuffix
+        .replace(/([a-z])(\d)/g, '$1-$2')
+        .replace(/(\d)([a-z])/gi, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+    },
+  },
+  {
+    // @heroicons/react/20/outline
+    pattern: '@heroicons/react/20/outline',
+    prefix: 'i-heroicons-',
+    suffix: '-20-outline',
+    iconFilter: name => name.endsWith('Icon'),
+    transformName: (iconName) => {
+      const withoutSuffix = iconName.slice(0, -4)
+      return withoutSuffix
+        .replace(/([a-z])(\d)/g, '$1-$2')
+        .replace(/(\d)([a-z])/gi, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase()
+    },
+  },
+]
+
+/**
+ * Convert pixel value to Tailwind class
+ * @param {number} pixels
+ * @param {string} classPrefix - e.g., 'size', 'w', 'h'
+ * @returns {string}
+ */
+function pixelToClass(pixels, classPrefix) {
+  const units = pixels / 4
+  return `${classPrefix}-${units}`
+}
+
+/**
+ * Get icon class from config
+ * @param {string} iconName
+ * @param {object} config
+ * @returns {string}
+ */
+function getIconClass(iconName, config) {
+  const transformed = config.transformName(iconName)
+  return `${config.prefix}${transformed}${config.suffix || ''}`
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+export default {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Prefer Tailwind CSS icon classes over icon library components',
+    },
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          libraries: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                pattern: { type: 'string' },
+                prefix: { type: 'string' },
+                suffix: { type: 'string' },
+              },
+              required: ['pattern', 'prefix'],
+            },
+          },
+          propMappings: {
+            type: 'object',
+            additionalProperties: { type: 'string' },
+            description: 'Maps component props to Tailwind class prefixes, e.g., { size: "size", width: "w", height: "h" }',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      preferTailwindIcon:
+        'Prefer using Tailwind CSS icon class "{{iconClass}}" over "{{componentName}}" from "{{source}}"',
+      preferTailwindIconImport:
+        'Icon "{{importedName}}" from "{{source}}" can be replaced with Tailwind CSS class "{{iconClass}}"',
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {}
+    const iconConfigs = options.libraries || DEFAULT_ICON_CONFIGS
+    const propMappings = options.propMappings || DEFAULT_PROP_MAPPINGS
+
+    // Track imports: localName -> { node, importedName, config, source, used }
+    const iconImports = new Map()
+
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value
+
+        // Find matching config
+        const config = iconConfigs.find(c => source === c.pattern || source.startsWith(`${c.pattern}/`))
+        if (!config)
+          return
+
+        // Use default filter if not provided (for user-configured libraries)
+        const iconFilter = config.iconFilter || (() => true)
+
+        for (const specifier of node.specifiers) {
+          if (specifier.type === 'ImportSpecifier') {
+            const importedName = specifier.imported.name
+            const localName = specifier.local.name
+
+            if (iconFilter(importedName)) {
+              iconImports.set(localName, {
+                node: specifier,
+                importedName,
+                localName,
+                config,
+                source,
+                used: false,
+              })
+            }
+          }
+        }
+      },
+
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier')
+          return
+
+        const componentName = node.name.name
+        const iconInfo = iconImports.get(componentName)
+
+        if (!iconInfo)
+          return
+
+        iconInfo.used = true
+
+        const iconClass = getIconClass(iconInfo.importedName, iconInfo.config)
+
+        // Find className attribute
+        const classNameAttr = node.attributes.find(
+          attr => attr.type === 'JSXAttribute' && attr.name.name === 'className',
+        )
+
+        // Process prop mappings (size, width, height, etc.)
+        const mappedClasses = []
+        const mappedPropNames = Object.keys(propMappings)
+
+        for (const propName of mappedPropNames) {
+          const attr = node.attributes.find(
+            a => a.type === 'JSXAttribute' && a.name.name === propName,
+          )
+
+          if (attr && attr.value) {
+            let pixelValue = null
+
+            if (attr.value.type === 'JSXExpressionContainer'
+              && attr.value.expression.type === 'Literal'
+              && typeof attr.value.expression.value === 'number') {
+              pixelValue = attr.value.expression.value
+            }
+            else if (attr.value.type === 'Literal'
+              && typeof attr.value.value === 'number') {
+              pixelValue = attr.value.value
+            }
+
+            if (pixelValue !== null) {
+              mappedClasses.push(pixelToClass(pixelValue, propMappings[propName]))
+            }
+          }
+        }
+
+        // Build new className
+        const sourceCode = context.sourceCode
+        let newClassName
+        const classesToAdd = [iconClass, ...mappedClasses].filter(Boolean).join(' ')
+
+        if (classNameAttr && classNameAttr.value) {
+          if (classNameAttr.value.type === 'Literal') {
+            newClassName = `${classesToAdd} ${classNameAttr.value.value}`
+          }
+          else if (classNameAttr.value.type === 'JSXExpressionContainer') {
+            const expression = sourceCode.getText(classNameAttr.value.expression)
+            newClassName = `\`${classesToAdd} \${${expression}}\``
+          }
+        }
+        else {
+          newClassName = classesToAdd
+        }
+
+        const parent = node.parent
+        const isSelfClosing = node.selfClosing
+        const excludedAttrs = ['className', ...mappedPropNames]
+
+        context.report({
+          node,
+          messageId: 'preferTailwindIcon',
+          data: {
+            iconClass,
+            componentName,
+            source: iconInfo.source,
+          },
+          suggest: [
+            {
+              messageId: 'preferTailwindIcon',
+              data: {
+                iconClass,
+                componentName,
+                source: iconInfo.source,
+              },
+              fix(fixer) {
+                const fixes = []
+
+                const classValue = newClassName.startsWith('`')
+                  ? `{${newClassName}}`
+                  : `"${newClassName}"`
+
+                const otherAttrs = node.attributes
+                  .filter(attr => !(attr.type === 'JSXAttribute' && excludedAttrs.includes(attr.name.name)))
+                  .map(attr => sourceCode.getText(attr))
+                  .join(' ')
+
+                const attrsStr = otherAttrs
+                  ? `className=${classValue} ${otherAttrs}`
+                  : `className=${classValue}`
+
+                if (isSelfClosing) {
+                  fixes.push(fixer.replaceText(parent, `<span ${attrsStr} />`))
+                }
+                else {
+                  const closingElement = parent.closingElement
+                  fixes.push(fixer.replaceText(node, `<span ${attrsStr}>`))
+                  if (closingElement) {
+                    fixes.push(fixer.replaceText(closingElement, '</span>'))
+                  }
+                }
+
+                return fixes
+              },
+            },
+          ],
+        })
+      },
+
+      'Program:exit': function () {
+        const sourceCode = context.sourceCode
+
+        // Report icons that were imported but not found in JSX
+        for (const [, iconInfo] of iconImports) {
+          if (!iconInfo.used) {
+            // Verify the import is still referenced somewhere in the file (besides the import itself)
+            try {
+              const variables = sourceCode.getDeclaredVariables(iconInfo.node)
+              const variable = variables[0]
+              // Check if there are any references besides the import declaration
+              const hasReferences = variable && variable.references.some(
+                ref => ref.identifier !== iconInfo.node.local,
+              )
+              if (!hasReferences)
+                continue
+            }
+            catch {
+              continue
+            }
+
+            const iconClass = getIconClass(iconInfo.importedName, iconInfo.config)
+            context.report({
+              node: iconInfo.node,
+              messageId: 'preferTailwindIconImport',
+              data: {
+                importedName: iconInfo.importedName,
+                source: iconInfo.source,
+                iconClass,
+              },
+            })
+          }
+        }
+      },
+    }
+  },
+}

web/eslint.config.mjs

@@ -118,6 +118,17 @@ export default antfu(
   //     // 'dify-i18n/require-ns-option': 'error',
   //   },
   // },
+  // Prefer Tailwind CSS icons over @remixicon/react
+  {
+    files: ['**/*.tsx'],
+    ignores: ['eslint-rules/**'],
+    plugins: {
+      'dify-i18n': difyI18n,
+    },
+    rules: {
+      'dify-i18n/prefer-tailwind-icon': 'warn',
+    },
+  },
   // i18n JSON validation rules
   {
     files: ['i18n/**/*.json'],

web/package.json

@@ -162,7 +162,12 @@
   "devDependencies": {
     "@antfu/eslint-config": "7.0.1",
     "@chromatic-com/storybook": "5.0.0",
+    "@egoist/tailwindcss-icons": "1.9.0",
     "@eslint-react/eslint-plugin": "2.7.0",
+    "@iconify-json/heroicons": "1.2.3",
+    "@iconify-json/ri": "1.2.7",
+    "@iconify/tools": "5.0.2",
+    "@iconify/utils": "3.1.0",
     "@mdx-js/loader": "3.1.1",
     "@mdx-js/react": "3.1.1",
     "@next/bundle-analyzer": "16.1.5",
@@ -205,7 +210,7 @@
     "@vitejs/plugin-react": "5.1.2",
     "@vitest/coverage-v8": "4.0.17",
     "autoprefixer": "10.4.21",
-    "code-inspector-plugin": "1.3.6",
+    "code-inspector-plugin": "1.4.1",
     "cross-env": "10.1.0",
     "esbuild-wasm": "0.27.2",
     "eslint": "9.39.2",
@@ -231,7 +236,8 @@
     "uglify-js": "3.19.3",
     "vite": "7.3.1",
     "vite-tsconfig-paths": "6.0.4",
-    "vitest": "4.0.17"
+    "vitest": "4.0.17",
+    "workspace-root": "3.3.1"
   },
   "pnpm": {
     "overrides": {

web/pnpm-lock.yaml

@@ -372,9 +372,24 @@ importers:
       '@chromatic-com/storybook':
         specifier: 5.0.0
         version: 5.0.0(storybook@10.2.0(@testing-library/dom@10.4.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
+      '@egoist/tailwindcss-icons':
+        specifier: 1.9.0
+        version: 1.9.0(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.2))
       '@eslint-react/eslint-plugin':
         specifier: 2.7.0
         version: 2.7.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@iconify-json/heroicons':
+        specifier: 1.2.3
+        version: 1.2.3
+      '@iconify-json/ri':
+        specifier: 1.2.7
+        version: 1.2.7
+      '@iconify/tools':
+        specifier: 5.0.2
+        version: 5.0.2
+      '@iconify/utils':
+        specifier: 3.1.0
+        version: 3.1.0
       '@mdx-js/loader':
         specifier: 3.1.1
         version: 3.1.1(webpack@5.104.1(esbuild@0.27.2)(uglify-js@3.19.3))
@@ -502,8 +517,8 @@ importers:
         specifier: 10.4.21
         version: 10.4.21(postcss@8.5.6)
       code-inspector-plugin:
-        specifier: 1.3.6
-        version: 1.3.6
+        specifier: 1.4.1
+        version: 1.4.1
       cross-env:
         specifier: 10.1.0
         version: 10.1.0
@@ -582,6 +597,9 @@ importers:
       vitest:
         specifier: 4.0.17
         version: 4.0.17(@types/node@18.15.0)(@vitest/browser-playwright@4.0.17)(jiti@1.21.7)(jsdom@27.3.0(canvas@3.2.1))(sass@1.93.2)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      workspace-root:
+        specifier: 3.3.1
+        version: 3.3.1
 
 packages:
 
@@ -730,6 +748,9 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
+
   '@asamuzakjp/css-color@4.1.1':
     resolution: {integrity: sha512-B0Hv6G3gWGMn0xKJ0txEi/jM5iFpT3MfDxmhZFb4W047GvytCf1DHQ1D69W3zHI4yWe2aTZAA0JnbMZ7Xc8DuQ==}
 
@@ -866,23 +887,23 @@ packages:
   '@clack/prompts@0.8.2':
     resolution: {integrity: sha512-6b9Ab2UiZwJYA9iMyboYyW9yJvAO9V753ZhS+DHKEjZRKAxPPOb7MXXu84lsPFG+vZt6FRFniZ8rXi+zCIw4yQ==}
 
-  '@code-inspector/core@1.3.6':
-    resolution: {integrity: sha512-bSxf/PWDPY6rv9EFf0mJvTnLnz3927PPrpX6BmQcRKQab+Ez95yRqrVZY8IcBUpaqA/k3etA5rZ1qkN0V4ERtw==}
+  '@code-inspector/core@1.4.1':
+    resolution: {integrity: sha512-k5iLYvrBBPBPODcwuzgEcAZnXU4XTnEO1jOmNQBHCehN6nrMO1m5Efjz35KPkSX+8T4IWvXvLoXR5XPfhDlxug==}
 
-  '@code-inspector/esbuild@1.3.6':
-    resolution: {integrity: sha512-s35dseBXI2yqfX6ZK29Ix941jaE/4KPlZZeMk6B5vDahj75FDUfVxQ7ORy4cX2hyz8CmlOycsY/au5mIvFpAFg==}
+  '@code-inspector/esbuild@1.4.1':
+    resolution: {integrity: sha512-0tf73j0wgsu1Rl5CNe5o5L/GB/lGvQQVjuLTbAB/but+Bw//nHRnlrA29lBzNM6cyBDZzwofa71Q+TH8Fu4aZQ==}
 
-  '@code-inspector/mako@1.3.6':
-    resolution: {integrity: sha512-FJvuTElOi3TUCWTIaYTFYk2iTUD6MlO51SC8SYfwmelhuvnOvTMa2TkylInX16OGb4f7sGNLRj2r+7NNx/gqpw==}
+  '@code-inspector/mako@1.4.1':
+    resolution: {integrity: sha512-inpiJbc8J+qaEYcMgzyAFusuyryZ9i0wUQhLJRbWl1WrUdWTE8xNHDjhPeTVaMav42NTGDnVKJhhKD6tNaxyFA==}
 
-  '@code-inspector/turbopack@1.3.6':
-    resolution: {integrity: sha512-pfXgvZCn4/brpTvqy8E0HTe6V/ksVKEPQo697Nt5k22kBnlEM61UT3rI2Art+fDDEMPQTxVOFpdbwCKSLwMnmQ==}
+  '@code-inspector/turbopack@1.4.1':
+    resolution: {integrity: sha512-xVefk907E39U/oywR9YiEqJn1VlNBHIcIsYkjNnFp0U3qBb3A40VqivlCqkWaP9xHAwEH8/UT3Sfh3aoUPC9/Q==}
 
-  '@code-inspector/vite@1.3.6':
-    resolution: {integrity: sha512-vXYvzGc0S1NR4p3BeD1Xx2170OnyecZD0GtebLlTiHw/cetzlrBHVpbkIwIEzzzpTYYshwwDt8ZbuvdjmqhHgw==}
+  '@code-inspector/vite@1.4.1':
+    resolution: {integrity: sha512-ptbGkmtw5mvuFse6Kjmd6bCgm+isHrBq+HumWlAMBH//Qb2frHkEV7kWjO6/AkBXfm/ccNJy+jNwWq0632ChDg==}
 
-  '@code-inspector/webpack@1.3.6':
-    resolution: {integrity: sha512-bi/+vsym9d6NXQQ++Phk74VLMiVoGKjgPHr445j/D43URG8AN8yYa+gRDBEDcZx4B128dihrVMxEO8+OgWGjTw==}
+  '@code-inspector/webpack@1.4.1':
+    resolution: {integrity: sha512-UkqC5MsWRVJT2y10GM7tIZdQmFuGAlArJSfq2hq727eXMDV3otY5d1UCQopYvUIEC90QQNHJDeK4e+UQipF6AQ==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -915,10 +936,18 @@ packages:
     resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
     engines: {node: '>=18'}
 
+  '@cyberalien/svg-utils@1.0.11':
+    resolution: {integrity: sha512-qEE9mnyI+avfGT3emKuRs3ucYkITeaV0Xi7VlYN41f+uGnZBecQP3jwz/AF437H9J4Q7qPClHKm4NiTYpNE6hA==}
+
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
 
+  '@egoist/tailwindcss-icons@1.9.0':
+    resolution: {integrity: sha512-xWA9cUy6hzlK7Y6TaoRIcwmilSXiTJ8rbXcEdf9uht7yzDgw/yIgF4rThIQMrpD2Y2v4od51+r2y6Z7GStanDQ==}
+    peerDependencies:
+      tailwindcss: '*'
+
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
@@ -1292,9 +1321,21 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/heroicons@1.2.3':
+    resolution: {integrity: sha512-n+vmCEgTesRsOpp5AB5ILB6srsgsYK+bieoQBNlafvoEhjVXLq8nIGN4B0v/s4DUfa0dOrjwE/cKJgIKdJXOEg==}
+
+  '@iconify-json/ri@1.2.7':
+    resolution: {integrity: sha512-j/Fkb8GlWY5y/zLj1BGxWRtDzuJFrI7562zLw+iQVEykieBgew43+r8qAvtSajvb75MfUIHjsNOYQPRD8FfLfw==}
+
+  '@iconify/tools@5.0.2':
+    resolution: {integrity: sha512-esoFiH0LYpiqqVAO+RTenh6qqGKf0V8T0T6IG7dFLCw26cjcYGG34UMHjkbuq+MMl23U39FtkzhWZsCDDtOhew==}
+
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
+
   '@iconify/utils@3.1.0':
     resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
@@ -1786,6 +1827,22 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@node-kit/extra.fs@3.3.1':
+    resolution: {integrity: sha512-3HJ6g6kADuVBASMgo99iJf1P2UToxOYtxjzt8JrpaSdfPw2YM9U9FzWAoM8vMdfTMwXCX7t7jVM7nqxZ3VJTeg==}
+    hasBin: true
+
+  '@node-kit/lerna-workspace-root@3.3.1':
+    resolution: {integrity: sha512-NoQ2+L13iqRLx3J8uyW7+05x/POMGwYcF8mzLpYvfrKFTPPh8XdN7YNuHguba0jXZwV6X2VDn8dAGdMhNERcNg==}
+    hasBin: true
+
+  '@node-kit/pnpm-workspace-root@3.3.1':
+    resolution: {integrity: sha512-IBvLeY+X3CgvS7aLQnn4AZDRTguFs5W/WxZJNi4YWlvAIdua1N8GTCjQQps3f6NUnV83IPrZkTJh5HTzYTMY2w==}
+    hasBin: true
+
+  '@node-kit/yarn-workspace-root@3.3.1':
+    resolution: {integrity: sha512-9PmP3y9814aPOsB4CFnYDbIcJ7/nPZZolbFhJ0f0gqYG3aySFrBTL1o2RRq9KlBct19HfceyT80Ut4c/Q+UVpA==}
+    hasBin: true
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -2077,6 +2134,14 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
+  '@pnpm/constants@7.1.1':
+    resolution: {integrity: sha512-31pZqMtjwV+Vaq7MaPrT1EoDFSYwye3dp6BiHIGRJmVThCQwySRKM7hCvqqI94epNkqFAAYoWrNynWoRYosGdw==}
+    engines: {node: '>=16.14'}
+
+  '@pnpm/error@5.0.3':
+    resolution: {integrity: sha512-ONJU5cUeoeJSy50qOYsMZQHTA/9QKmGgh1ATfEpCLgtbdwqUiwD9MxHNeXUYYI/pocBCz6r1ZCFqiQvO+8SUKA==}
+    engines: {node: '>=16.14'}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -3879,8 +3944,8 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
-  code-inspector-plugin@1.3.6:
-    resolution: {integrity: sha512-ddTg8embDqLZxKEdSNOm+/0YnVVgWKr10+Bu2qFqQDObj/3twGh0Z23TIz+5/URxfRhTPbp2sUSpWlw78piJbQ==}
+  code-inspector-plugin@1.4.1:
+    resolution: {integrity: sha512-DuOEoOWtkz3Mq6JTogJjSfXkVnXuGy6Gjfi+eBYtgRFlZmQ5sw1/LacsPnTK89O4Oz6gZj+zjxpwNfpWg3htpA==}
 
   collapse-white-space@2.1.0:
     resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
@@ -3908,6 +3973,10 @@ packages:
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
   commander@13.1.0:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
@@ -3979,10 +4048,21 @@ packages:
   css-mediaquery@0.1.2:
     resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==}
 
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   css-tree@3.1.0:
     resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -3991,6 +4071,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+
   cssstyle@5.3.7:
     resolution: {integrity: sha512-7D2EPVltRrsTkhpQmksIu+LxeWAIEk6wRDMJ1qljlv+CKHJM+cJLlfhWIzNA44eAsHXSNe3+vO6DW1yCYx8SuQ==}
     engines: {node: '>=20'}
@@ -4249,12 +4333,25 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
   dompurify@3.2.7:
     resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
 
   dompurify@3.3.0:
     resolution: {integrity: sha512-r+f6MYR1gGN1eJv0TVQbhA7if/U7P87cdPl3HN5rikqaBSBxLiCb/b9O+2eG0cxz0ghyU+mU1QkbsOwERMYlWQ==}
 
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dotenv@16.6.1:
     resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
     engines: {node: '>=12'}
@@ -4312,6 +4409,10 @@ packages:
     resolution: {integrity: sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==}
     engines: {node: '>=10.13.0'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -4745,6 +4846,9 @@ packages:
   fflate@0.4.8:
     resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -5546,6 +5650,9 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
+  mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
@@ -5733,6 +5840,10 @@ packages:
   mlly@1.8.0:
     resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
+  modern-tar@0.7.3:
+    resolution: {integrity: sha512-4W79zekKGyYU4JXVmB78DOscMFaJth2gGhgfTl2alWE4rNe3nf4N2pqenQ0rEtIewrnD79M687Ouba3YGTLOvg==}
+    engines: {node: '>=18.0.0'}
+
   module-alias@2.2.3:
     resolution: {integrity: sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==}
 
@@ -6533,6 +6644,10 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  sax@1.4.4:
+    resolution: {integrity: sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==}
+    engines: {node: '>=11.0.0'}
+
   saxes@6.0.0:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
@@ -6802,6 +6917,11 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svgo@4.0.0:
+    resolution: {integrity: sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==}
+    engines: {node: '>=16'}
+    hasBin: true
+
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -7357,6 +7477,10 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  workspace-root@3.3.1:
+    resolution: {integrity: sha512-t/KqdJ8+Fa6ovo2o0tV2+WKfd+5gg2SP59MicW8dnwiN6A2huw73yQrnFyrFokJLPJ+ItwJHUjjhNvabUvl/gg==}
+    hasBin: true
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -7712,6 +7836,8 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.0.2
 
+  '@antfu/utils@8.1.1': {}
+
   '@asamuzakjp/css-color@4.1.1':
     dependencies:
       '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
@@ -7899,7 +8025,7 @@ snapshots:
       picocolors: 1.1.1
       sisteransi: 1.0.5
 
-  '@code-inspector/core@1.3.6':
+  '@code-inspector/core@1.4.1':
     dependencies:
       '@vue/compiler-dom': 3.5.27
       chalk: 4.1.2
@@ -7909,35 +8035,35 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/esbuild@1.3.6':
+  '@code-inspector/esbuild@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/mako@1.3.6':
+  '@code-inspector/mako@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/turbopack@1.3.6':
+  '@code-inspector/turbopack@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
-      '@code-inspector/webpack': 1.3.6
+      '@code-inspector/core': 1.4.1
+      '@code-inspector/webpack': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/vite@1.3.6':
+  '@code-inspector/vite@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
       chalk: 4.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@code-inspector/webpack@1.3.6':
+  '@code-inspector/webpack@1.4.1':
     dependencies:
-      '@code-inspector/core': 1.3.6
+      '@code-inspector/core': 1.4.1
     transitivePeerDependencies:
       - supports-color
 
@@ -7963,8 +8089,19 @@ snapshots:
 
   '@csstools/css-tokenizer@3.0.4': {}
 
+  '@cyberalien/svg-utils@1.0.11':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@discoveryjs/json-ext@0.5.7': {}
 
+  '@egoist/tailwindcss-icons@1.9.0(tailwindcss@3.4.18(tsx@4.21.0)(yaml@2.8.2))':
+    dependencies:
+      '@iconify/utils': 2.3.0
+      tailwindcss: 3.4.18(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - supports-color
+
   '@emnapi/core@1.8.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -8328,8 +8465,39 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/heroicons@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/ri@1.2.7':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/tools@5.0.2':
+    dependencies:
+      '@cyberalien/svg-utils': 1.0.11
+      '@iconify/types': 2.0.0
+      '@iconify/utils': 3.1.0
+      fflate: 0.8.2
+      modern-tar: 0.7.3
+      pathe: 2.0.3
+      svgo: 4.0.0
+
   '@iconify/types@2.0.0': {}
 
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+
   '@iconify/utils@3.1.0':
     dependencies:
       '@antfu/install-pkg': 1.1.0
@@ -8886,6 +9054,25 @@ snapshots:
   '@next/swc-win32-x64-msvc@16.1.5':
     optional: true
 
+  '@node-kit/extra.fs@3.3.1': {}
+
+  '@node-kit/lerna-workspace-root@3.3.1':
+    dependencies:
+      '@node-kit/extra.fs': 3.3.1
+      find-up: 5.0.0
+
+  '@node-kit/pnpm-workspace-root@3.3.1':
+    dependencies:
+      '@node-kit/extra.fs': 3.3.1
+      '@pnpm/error': 5.0.3
+      find-up: 5.0.0
+
+  '@node-kit/yarn-workspace-root@3.3.1':
+    dependencies:
+      '@node-kit/extra.fs': 3.3.1
+      find-up: 5.0.0
+      micromatch: 4.0.8
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -9147,6 +9334,12 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
+  '@pnpm/constants@7.1.1': {}
+
+  '@pnpm/error@5.0.3':
+    dependencies:
+      '@pnpm/constants': 7.1.1
+
   '@polka/url@1.0.0-next.29': {}
 
   '@preact/signals-core@1.12.2': {}
@@ -11143,14 +11336,14 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
-  code-inspector-plugin@1.3.6:
+  code-inspector-plugin@1.4.1:
     dependencies:
-      '@code-inspector/core': 1.3.6
-      '@code-inspector/esbuild': 1.3.6
-      '@code-inspector/mako': 1.3.6
-      '@code-inspector/turbopack': 1.3.6
-      '@code-inspector/vite': 1.3.6
-      '@code-inspector/webpack': 1.3.6
+      '@code-inspector/core': 1.4.1
+      '@code-inspector/esbuild': 1.4.1
+      '@code-inspector/mako': 1.4.1
+      '@code-inspector/turbopack': 1.4.1
+      '@code-inspector/vite': 1.4.1
+      '@code-inspector/webpack': 1.4.1
       chalk: 4.1.1
     transitivePeerDependencies:
       - supports-color
@@ -11179,6 +11372,8 @@ snapshots:
 
   comma-separated-tokens@2.0.3: {}
 
+  commander@11.1.0: {}
+
   commander@13.1.0: {}
 
   commander@2.20.3:
@@ -11237,15 +11432,34 @@ snapshots:
 
   css-mediaquery@0.1.2: {}
 
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@2.2.1:
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.2.1
+
   css-tree@3.1.0:
     dependencies:
       mdn-data: 2.12.2
       source-map-js: 1.2.1
 
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
 
+  csso@5.0.5:
+    dependencies:
+      css-tree: 2.2.1
+
   cssstyle@5.3.7:
     dependencies:
       '@asamuzakjp/css-color': 4.1.1
@@ -11511,6 +11725,18 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
   dompurify@3.2.7:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -11519,6 +11745,12 @@ snapshots:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dotenv@16.6.1: {}
 
   duplexer@0.1.2: {}
@@ -11571,6 +11803,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  entities@4.5.0: {}
+
   entities@6.0.1: {}
 
   entities@7.0.1: {}
@@ -12220,6 +12454,8 @@ snapshots:
 
   fflate@0.4.8: {}
 
+  fflate@0.8.2: {}
+
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -13171,6 +13407,8 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
+  mdn-data@2.0.28: {}
+
   mdn-data@2.12.2: {}
 
   memoize-one@5.2.1: {}
@@ -13535,6 +13773,8 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.6.3
 
+  modern-tar@0.7.3: {}
+
   module-alias@2.2.3: {}
 
   monaco-editor@0.55.1:
@@ -14464,6 +14704,8 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.6
 
+  sax@1.4.4: {}
+
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
@@ -14772,6 +15014,16 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svgo@4.0.0:
+    dependencies:
+      commander: 11.1.0
+      css-select: 5.2.2
+      css-tree: 3.1.0
+      css-what: 6.2.2
+      csso: 5.0.5
+      picocolors: 1.1.1
+      sax: 1.4.4
+
   symbol-tree@3.2.4: {}
 
   synckit@0.11.12:
@@ -15352,6 +15604,12 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
+  workspace-root@3.3.1:
+    dependencies:
+      '@node-kit/lerna-workspace-root': 3.3.1
+      '@node-kit/pnpm-workspace-root': 3.3.1
+      '@node-kit/yarn-workspace-root': 3.3.1
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0

web/tailwind-common-config.ts

@@ -1,8 +1,92 @@
+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'
 import typography from './typography.js'
 
+const _dirname = typeof __dirname !== 'undefined'
+  ? __dirname
+  : path.dirname(fileURLToPath(import.meta.url))
+
+function getCollections(dir: string) {
+  // Import icons
+  const iconSet = importDirectorySync(dir, {
+    includeSubDirs: true,
+    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()
+}
+
 const config = {
   theme: {
     typography,
@@ -146,7 +230,21 @@ const config = {
       },
     },
   },
-  plugins: [tailwindTypography],
+  plugins: [
+    tailwindTypography,
+    iconsPlugin({
+      collections: {
+        'custom-public': getCollections(path.resolve(_dirname, 'app/components/base/icons/assets/public')),
+        'custom-vender': getCollections(path.resolve(_dirname, 'app/components/base/icons/assets/vender')),
+        ...getIconCollections(['heroicons', 'ri']),
+      },
+      extraProperties: {
+        width: '1rem',
+        height: '1rem',
+        display: 'block',
+      },
+    }),
+  ],
   // https://github.com/tailwindlabs/tailwindcss/discussions/5969
   corePlugins: {
     preflight: false,