Icon Factory

/**
 * Create a Lucide icon component from SVG data
 * @param iconName - Name of the icon (used for CSS classes and debugging)
 * @param iconNode - SVG element data structure defining the icon's paths and shapes
 * @returns Vue functional component accepting LucideProps
 */
function createLucideIcon(
  iconName: string, 
  iconNode: IconNode
): FunctionalComponent<LucideProps>;

type IconNode = [elementName: string, attrs: Record<string, string>][];
type LucideIcon = FunctionalComponent<LucideProps>;

import { createLucideIcon } from "lucide-vue-next";

// Create a custom heart icon component
const CustomHeart = createLucideIcon('custom-heart', [
  ['path', { 
    d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',
    key: 'heart-path'
  }]
]);

// Create a custom logo icon component
const CompanyLogo = createLucideIcon('company-logo', [
  ['rect', { x: '2', y: '6', width: '20', height: '12', rx: '2', key: 'logo-bg' }],
  ['path', { d: 'M7 12h10', key: 'logo-line1' }],
  ['path', { d: 'M7 16h6', key: 'logo-line2' }]
]);

// Create a complex multi-element icon
const ComplexIcon = createLucideIcon('complex-icon', [
  ['circle', { cx: '12', cy: '12', r: '10', key: 'outer-circle' }],
  ['circle', { cx: '12', cy: '12', r: '6', key: 'inner-circle' }],
  ['path', { d: 'M12 8v8', key: 'vertical-line' }],
  ['path', { d: 'M8 12h8', key: 'horizontal-line' }]
]);

<template>
  <div>
    <!-- Use custom icon components just like built-in ones -->
    <CustomHeart :size="32" color="red" />
    <CompanyLogo :size="48" color="blue" />
    <ComplexIcon :size="24" :stroke-width="1.5" />
  </div>
</template>

<script setup>
import { createLucideIcon } from "lucide-vue-next";

// Define custom icons
const CustomHeart = createLucideIcon('custom-heart', [
  ['path', { 
    d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',
    key: 'heart-path'
  }]
]);

const CompanyLogo = createLucideIcon('company-logo', [
  ['rect', { x: '2', y: '6', width: '20', height: '12', rx: '2', key: 'logo-bg' }],
  ['path', { d: 'M7 12h10', key: 'logo-line1' }],
  ['path', { d: 'M7 16h6', key: 'logo-line2' }]
]);

const ComplexIcon = createLucideIcon('complex-icon', [
  ['circle', { cx: '12', cy: '12', r: '10', key: 'outer-circle' }],
  ['circle', { cx: '12', cy: '12', r: '6', key: 'inner-circle' }],
  ['path', { d: 'M12 8v8', key: 'vertical-line' }],
  ['path', { d: 'M8 12h8', key: 'horizontal-line' }]
]);
</script>

type IconNode = [elementName: string, attrs: Record<string, string>][];

// Example structures for different SVG elements:

// Simple path element
const pathIcon: IconNode = [
  ['path', { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' }]
];

// Multiple elements with different types
const multiElementIcon: IconNode = [
  ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '2', ry: '2' }],
  ['circle', { cx: '9', cy: '9', r: '2' }], 
  ['path', { d: 'M21 15.5c-.6-1.5-2.2-2.5-4-2.5s-3.4 1-4 2.5' }]
];

// Elements with keys for Vue optimization
const keyedIcon: IconNode = [
  ['path', { d: 'M9 12l2 2 4-4', key: 'check-path' }],
  ['circle', { cx: '12', cy: '12', r: '10', key: 'check-circle' }]
];

import { createLucideIcon } from "lucide-vue-next";
import { ref, computed } from "vue";

// Dynamic icon creation based on data
function createIconFromData(iconData: any) {
  const iconNode: IconNode = iconData.elements.map((element: any) => [
    element.type,
    element.attributes
  ]);
  
  return createLucideIcon(iconData.name, iconNode);
}

// Reactive icon creation
const iconConfig = ref({
  name: 'dynamic-icon',
  elements: [
    { type: 'circle', attributes: { cx: '12', cy: '12', r: '10' } },
    { type: 'path', attributes: { d: 'M8 12h8' } }
  ]
});

const DynamicIcon = computed(() => 
  createIconFromData(iconConfig.value)
);

import { createLucideIcon } from "lucide-vue-next";

// Define icon data
const iconLibrary = {
  'brand-logo': [
    ['rect', { x: '2', y: '3', width: '20', height: '14', rx: '2', ry: '2' }],
    ['path', { d: 'M8 21l8-8-8-8' }]
  ],
  'custom-arrow': [
    ['path', { d: 'M5 12h14' }],
    ['path', { d: 'M12 5l7 7-7 7' }]
  ],
  'special-star': [
    ['polygon', { points: '12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26' }]
  ]
};

// Create icon components
const customIcons = Object.fromEntries(
  Object.entries(iconLibrary).map(([name, iconNode]) => [
    name,
    createLucideIcon(name, iconNode)
  ])
);

// Export for use
export const { 
  'brand-logo': BrandLogo, 
  'custom-arrow': CustomArrow, 
  'special-star': SpecialStar 
} = customIcons;

import { createLucideIcon } from "lucide-vue-next";

// Function to convert SVG string to IconNode
function svgStringToIconNode(svgString: string): IconNode {
  // Parse SVG string and extract elements
  // This is a simplified example - real implementation would need proper SVG parsing
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
  const svgElement = svgDoc.querySelector('svg');
  
  const iconNode: IconNode = [];
  if (svgElement) {
    for (const child of svgElement.children) {
      const attrs: Record<string, string> = {};
      for (const attr of child.attributes) {
        attrs[attr.name] = attr.value;
      }
      iconNode.push([child.tagName.toLowerCase(), attrs]);
    }
  }
  
  return iconNode;
}

// Create icon from SVG string
const svgString = `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
    <path d="M2 17l10 5 10-5"/>
    <path d="M2 12l10 5 10-5"/>
  </svg>
`;

const ImportedIcon = createLucideIcon(
  'imported-icon',
  svgStringToIconNode(svgString)
);