Pre generate the HTML markup for webcomponent icons

* Adjust the web component icons build to use contnet and attrs as well

* Adjust the web component icons build to use contnet and attrs as well

* run generate CMD

* Adjust the web component icons generation process. Ensure that the svg tag is generated and placed in the icon component directly

* Adjust the custom icons generation process. Ensure that the svg tag is generated and placed in the icon component directly

* removing unused code

* run ther generation CMD with the new logic

* changelog

* Add disclaimer that the Icon `SVG` tag is generated via @carbon/icons.

* Remove unused packages

* genrated the icons again

* changelog

* Update packages/icons-builder/src/templates.js

Co-authored-by: felix-hcl <felix.muller@hcl.com>

* generated icons again

---------

Co-authored-by: felix-hcl <felix.muller@hcl.com>

Author: HanjoHagemeierHCL

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Fixed
 
 ### Changed
+- Adjusting the web component icon generation logic for carbon and custom icons. The `SVG` tag is now pre-generated and directly part for the Icon web component.
 
 #### Breaking changes
 

packages/icons-builder/src/generate.js

@@ -32,6 +32,7 @@ import {
 } from './utils/copyrightYears.js';
 
 const carbonSourcePath = path.resolve(process.cwd(), 'node_modules/@carbon/icons/es');
+const carbonPkgJsonPath = path.resolve(process.cwd(), 'node_modules/@carbon/icons/package.json');
 const carbonReactDestPath = path.resolve(process.cwd(), '../react/src/carbon/es');
 const carbonWcDestPath = path.resolve(process.cwd(), '../web-component/src/carbon/es');
 
@@ -180,7 +181,7 @@ const processCustomIconDirectory = (
           ? creationYear 
           : `${creationYear}, ${lastModifiedYear}`;
 
-        const wcContent = createCustomWebComponentIcon(iconName, sizeInt, content, attrs, wcUtilsImportPath, finalCopyright);
+        const wcContent = createCustomWebComponentIcon(iconName, content, attrs, wcUtilsImportPath, finalCopyright);
         ensureDirSync(wcIconDir);
         fs.writeFileSync(wcDestFile, wcContent);
         generatedPaths.wc.add(path.resolve(wcDestFile));
@@ -203,7 +204,7 @@ const processCustomIconDirectory = (
   }
 }
 
-const buildIcons = () => {
+const buildIcons = async () => {
   console.log('START - Generating icons...');
 
   const counters = {
@@ -231,6 +232,7 @@ const buildIcons = () => {
 
   // Generate Carbon Icons
   console.log('Generating Carbon icons...');
+  const carbonVersion = JSON.parse(fs.readFileSync(carbonPkgJsonPath, 'utf8')).version;
   const files = fs.readdirSync(carbonSourcePath);
 
   for (const originalName of files) {
@@ -264,11 +266,9 @@ const buildIcons = () => {
 
     // Create web components
     if (!wcExcludes.has(originalName) && fs.existsSync(path.join(carbonSourcePath, originalName, '32.js'))) {
-      let isRenamed = false;
       let iconName = originalName;
       if (wcRenames.has(originalName)) {
         iconName = wcRenames.get(originalName);
-        isRenamed = true;
       }
 
       try {
@@ -279,7 +279,11 @@ const buildIcons = () => {
         const existingYear = getCopyrightYear(indexFile, null);
         const year = existingYear || new Date().getFullYear().toString();
 
-        const wcContent = createCarbonWebComponentIcon(iconName, 32, originalName, year);
+        // Read carbon icon descriptor at build time to pre-render SVG markup
+        const carbonIconModule = await import(`@carbon/icons/es/${originalName}/32.js`);
+        const iconDescriptor = carbonIconModule.default;
+
+        const wcContent = createCarbonWebComponentIcon(iconName, iconDescriptor, year, carbonVersion);
         ensureDirSync(wcFilePath);
         fs.writeFileSync(indexFile, wcContent);
 

packages/icons-builder/src/templates.js

@@ -64,16 +64,64 @@ export default createSvgIcon(Icon.name, Icon.size, Icon.content, Icon.attrs);
 };
 
 /**
- * Creates a Web Component carbon icon template.
+ * Converts a carbon icon descriptor attribute name to kebab-case for SVG output.
+ * Preserves viewBox and xmlns as-is.
+ * @param {string} str - The attribute name to convert.
+ * @returns {string} The kebab-case attribute name.
+ */
+const toKebabCase = (str) => {
+  if (str === 'viewBox' || str === 'xmlns' || str === 'preserveAspectRatio') {
+    return str;
+  }
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+};
+
+/**
+ * Formats SVG attributes as an HTML attribute string.
+ * @param {object} attrs - The attributes object.
+ * @returns {string} The formatted attribute string.
+ */
+const formatSvgAttributes = (attrs) => {
+  return Object.entries(attrs)
+    .map(([key, value]) => `${toKebabCase(key)}="${value}"`)
+    .join(' ');
+};
+
+/**
+ * Recursively renders carbon icon content elements as an SVG markup string.
+ * @param {Array} content - The content array from the carbon icon descriptor.
+ * @returns {string} The SVG child elements as a markup string.
+ */
+const renderContentElements = (content) => {
+  return content.map(item => {
+    const attrsStr = item.attrs ? formatSvgAttributes(item.attrs) : '';
+    const children = item.content ? renderContentElements(item.content) : '';
+    if (children) {
+      return `<${item.elem}${attrsStr ? ' ' + attrsStr : ''}>${children}</${item.elem}>`;
+    }
+    return `<${item.elem}${attrsStr ? ' ' + attrsStr : ''} />`;
+  }).join('');
+};
+
+/**
+ * Creates a Web Component carbon icon template with pre-rendered SVG markup.
+ * The SVG is generated at build time, eliminating runtime dependencies on
+ * @carbon/icons and @carbon/icon-helpers.
  * @param {string} iconName - The name of the icon.
- * @param {string} size - The size of the icon.
- * @param {string} originalName - The original name of the icon.
+ * @param {object} iconDescriptor - The full carbon icon descriptor ({ elem, attrs, content }).
  * @param {string} copyrightYear - The copyright year.
+ * @param {string} carbonVersion - The version of @carbon/icons used to generate the SVG.
  * @returns {string} The Web Component icon template.
  */
-export const createCarbonWebComponentIcon = (iconName, size, originalName, copyrightYear) => {
+export const createCarbonWebComponentIcon = (iconName, iconDescriptor, copyrightYear, carbonVersion) => {
   const iconNameConstant = `icon-${iconName.toLowerCase().replace(/-+/g, '-')}`;
   const copyrightLine = formatCopyrightLine(copyrightYear);
+
+  // Build SVG attributes, adding preserveAspectRatio
+  const svgAttrs = { ...iconDescriptor.attrs, preserveAspectRatio: 'xMidYMid' };
+  const svgAttrsStr = formatSvgAttributes(svgAttrs);
+  const svgChildren = renderContentElements(iconDescriptor.content);
+
   return `/* ======================================================================== *
 ${copyrightLine}
  * Licensed under the Apache License, Version 2.0 (the "License");          *
@@ -91,22 +139,26 @@ ${copyrightLine}
 
 /* auto generated file - do not edit */
 import { html } from 'lit';
-import Icon from '@carbon/icons/es/${originalName}/${size}';
-import { toSVG } from '@carbon/icon-helpers';
 import { BaseIcon } from '../../../utils/base-icon';
 import { canDefine } from '../../../utils';
 import { ICON_PREFIX } from '../../../utils/tags';
 
 export const ICON_NAME = \`\${ICON_PREFIX}${iconNameConstant}\`;
 export class WebComponentIcon extends BaseIcon {
   render() {
-    return html\`\${toSVG({...Icon, attrs: { ...Icon.attrs, preserveAspectRatio: 'xMidYMid'}})}\`;
+    /**
+     * The following HTML markup was generated using @carbon/icons ${carbonVersion}.
+     * @carbon/icons is licensed under Apache 2.0.
+     * Source: https://github.com/carbon-design-system/carbon
+     */
+    return html\`<svg ${svgAttrsStr}>${svgChildren}</svg>\`;
   }
-} 
+}
 
 if (canDefine && !customElements.get(ICON_NAME)) {
   customElements.define(ICON_NAME, WebComponentIcon);
 }
+
 declare global {
   interface HTMLElementTagNameMap {
     [ICON_NAME]: WebComponentIcon;
@@ -160,26 +212,22 @@ export default createSvgIcon('${iconName}', ${size}, content, attrs);
 };
 
 /**
- * Creates a custom Web Component icon template.
+ * Creates a custom Web Component icon template with pre-rendered SVG markup.
+ * The SVG is generated at build time, eliminating runtime createSvgIcon calls.
  * @param {string} iconName - The name of the icon.
- * @param {string} size - The size of the icon.
- * @param {object} content - The content of the icon.
- * @param {object} attrs - The attributes of the icon.
- * @param {string} utilsImportPath - The path to the utils import.
+ * @param {object} content - The content array from the parsed SVG.
+ * @param {object} attrs - The SVG attributes from the parsed SVG.
+ * @param {string} utilsImportPath - The relative path to the utils directory.
  * @param {string} copyrightString - The copyright string.
  * @returns {string} The custom Web Component icon template.
  */
-export const createCustomWebComponentIcon = (iconName, size, content, attrs, utilsImportPath, copyrightString) => {
+export const createCustomWebComponentIcon = (iconName, content, attrs, utilsImportPath, copyrightString) => {
   const iconNameConstant = `icon-${iconName.toLowerCase().replace(/-+/g, '-')}`;
+  const copyrightLine = formatCopyrightLine(copyrightString);
 
-  const stringifyOptions = {
-    indent: '  ',
-  };
+  const svgAttrsStr = formatSvgAttributes(attrs);
+  const svgChildren = renderContentElements(content);
 
-  const attrsString = stringifyObject(attrs, stringifyOptions);
-  let contentString = stringifyObject(content, stringifyOptions);
-  const copyrightLine = formatCopyrightLine(copyrightString);
-  
   return`/* ======================================================================== *
 ${copyrightLine}
  * Licensed under the Apache License, Version 2.0 (the "License");          *
@@ -197,18 +245,14 @@ ${copyrightLine}
 
 /* auto generated file - do not edit */
 import { html } from 'lit';
-import { createSvgIcon, IIconAttrs, IIconContent, canDefine } from '${utilsImportPath}';
 import { BaseIcon } from '${utilsImportPath}/base-icon';
+import { canDefine } from '${utilsImportPath}';
 import { ICON_PREFIX } from '${utilsImportPath}/tags';
 
-const attrs: IIconAttrs = ${attrsString};
-
-const content: IIconContent[] = ${contentString};
-
 export const ICON_NAME = \`\${ICON_PREFIX}${iconNameConstant}\`;
 export class WebComponentIcon extends BaseIcon {
   render() {
-    return html\`\${createSvgIcon(content, attrs)}\`;
+    return html\`<svg ${svgAttrsStr}>${svgChildren}</svg>\`;
   }
 }
 

packages/web-component/package-lock.json

@@ -62,8 +62,6 @@
     "vite": "^6.3.3"
   },
   "dependencies": {
-    "@carbon/icon-helpers": "^10.58.0",
-    "@carbon/icons": "11.27.0",
     "@types/debug": "^4.1.12",
     "debug": "^4.4.3"
   },

packages/web-component/package.json

@@ -15,58 +15,14 @@
 
 /* auto generated file - do not edit */
 import { html } from 'lit';
-import { createSvgIcon, IIconAttrs, IIconContent, canDefine } from '../../../utils';
 import { BaseIcon } from '../../../utils/base-icon';
+import { canDefine } from '../../../utils';
 import { ICON_PREFIX } from '../../../utils/tags';
 
-const attrs: IIconAttrs = {
-  xmlns: 'http://www.w3.org/2000/svg',
-  viewBox: '0 0 32 32',
-  width: 32,
-  height: 32
-};
-
-const content: IIconContent[] = [
-  {
-    elem: 'path',
-    attrs: {
-      d: 'M18 22L19.414 20.586L23 24.172V4H25V24.172L28.586 20.586L30 22L24 28L18 22Z',
-      fill: 'currentColor',
-      stroke: 'none',
-      strokeLinejoin: 'round',
-      strokeMiterlimit: 10
-    }
-  },
-  {
-    elem: 'path',
-    attrs: {
-      d: 'M16 6H2V8H16V6Z',
-      fill: 'currentColor',
-      stroke: 'none'
-    }
-  },
-  {
-    elem: 'path',
-    attrs: {
-      d: 'M12 12H2V14H12V12Z',
-      fill: 'currentColor',
-      stroke: 'none'
-    }
-  },
-  {
-    elem: 'path',
-    attrs: {
-      d: 'M8 18H2V20H8V18Z',
-      fill: 'currentColor',
-      stroke: 'none'
-    }
-  }
-];
-
 export const ICON_NAME = `${ICON_PREFIX}icon-sort-descending-alt`;
 export class WebComponentIcon extends BaseIcon {
   render() {
-    return html`${createSvgIcon(content, attrs)}`;
+    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path d="M18 22L19.414 20.586L23 24.172V4H25V24.172L28.586 20.586L30 22L24 28L18 22Z" fill="currentColor" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" /><path d="M16 6H2V8H16V6Z" fill="currentColor" stroke="none" /><path d="M12 12H2V14H12V12Z" fill="currentColor" stroke="none" /><path d="M8 18H2V20H8V18Z" fill="currentColor" stroke="none" /></svg>`;
   }
 }