transformIcons() — ui Function Reference

Architecture documentation for the transformIcons() function in transform-icons.ts from the ui codebase.

Function typescript FrameworkTooling TemplateSync calls 1

Entity Profile

FrameworkTooling→ TemplateSync→ transformIcons() — ui Function Reference

Dependency Diagram

graph TD
  0a2d730c_9a73_dfe6_9f2b_9c108ccbf668["transformIcons()"]
  66a6f0fd_f18b_9c39_b420_a7cbf1c73452["transform-icons.ts"]
  0a2d730c_9a73_dfe6_9f2b_9c108ccbf668 -->|defined in| 66a6f0fd_f18b_9c39_b420_a7cbf1c73452
  6a4b92ec_6f12_818d_e31b_560a2d61ed0e["_useSemicolon()"]
  0a2d730c_9a73_dfe6_9f2b_9c108ccbf668 -->|calls| 6a4b92ec_6f12_818d_e31b_560a2d61ed0e
  style 0a2d730c_9a73_dfe6_9f2b_9c108ccbf668 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/transformers/transform-icons.ts lines 5–204

export const transformIcons: Transformer = async ({ sourceFile, config }) => {
  const iconLibrary = config.iconLibrary

  // Fail silently if the icon library is not supported.
  // This is for legacy icon libraries.
  if (!iconLibrary || !(iconLibrary in iconLibraries)) {
    return sourceFile
  }

  const targetLibrary = iconLibrary as IconLibraryName
  const libraryConfig = iconLibraries[targetLibrary]
  let transformedIcons: string[] = []

  for (const element of sourceFile.getDescendantsOfKind(
    SyntaxKind.JsxSelfClosingElement
  )) {
    if (element.getTagNameNode()?.getText() !== "IconPlaceholder") {
      continue
    }

    // Find the library-specific prop (e.g., "lucide", "tabler", "hugeicons")
    const libraryPropAttr = element.getAttributes().find((attr) => {
      if (attr.getKind() !== SyntaxKind.JsxAttribute) {
        return false
      }
      const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute)
      return jsxAttr.getNameNode().getText() === targetLibrary
    })

    if (!libraryPropAttr) {
      continue // No icon specified for this library
    }

    const jsxIconAttr = libraryPropAttr.asKindOrThrow(SyntaxKind.JsxAttribute)
    const targetIconName = jsxIconAttr
      .getInitializer()
      ?.getText()
      .replace(/^["']|["']$/g, "")

    if (!targetIconName) {
      continue
    }

    if (!transformedIcons.includes(targetIconName)) {
      transformedIcons.push(targetIconName)
    }

    const usage = libraryConfig.usage
    const usageMatch = usage.match(/<(\w+)([^>]*)\s*\/>/)

    // Remove the library-specific prop
    jsxIconAttr.remove()

    // Remove all other library-specific props
    for (const attr of element.getAttributes()) {
      if (attr.getKind() !== SyntaxKind.JsxAttribute) {
        continue
      }
      const jsxAttr = attr.asKindOrThrow(SyntaxKind.JsxAttribute)
      const attrName = jsxAttr.getNameNode().getText()
      // Filter out library-specific props (lucide, tabler, hugeicons, etc.)
      if (attrName in iconLibraries) {
        jsxAttr.remove()
      }
    }

    if (!usageMatch) {
      element.getTagNameNode()?.replaceWithText(targetIconName)
      continue
    }

    const [, componentName, defaultPropsStr] = usageMatch

    if (componentName === "ICON") {
      // Get remaining user attributes (non-library props)
      const userAttributes = element
        .getAttributes()
        .filter((attr) => {
          if (attr.getKind() !== SyntaxKind.JsxAttribute) {
            return true
          }