feat: six-icon now supports custom svgs

docs/components/six-icon.md

@@ -17,8 +17,8 @@ SIX UI Library supports Material **Icons** and **Symbols**. Browse: [Material Ic
   <six-icon>pie_chart</six-icon>
   <six-icon>settings</six-icon>
   <six-icon>sick</six-icon>
-  <six-icon>fort</six-icon>
-  <six-icon>castle</six-icon>
+  <six-icon src="fort"></six-icon>
+  <six-icon src="castle"></six-icon>
 </div>
 ```
 
@@ -201,24 +201,70 @@ The icons are available in different sizes. Default size is medium (24px).
 ```
 
 
+#### Custom SVG
+
+You can pass your own SVG file to `six-icon` via the `src` attribute.
+The component will render the SVG in any supported icon size. 
+The default behavior loads the SVG as an external resource, preserving the colors and styling defined inside the file.
+
+<docs-demo-six-icon-12></docs-demo-six-icon-12>
+
+```html
+<div style="display: flex; gap: 1em; min-height: 6rem; align-items: center">
+  <six-icon size="xSmall" src="/assets/test.svg"></six-icon>
+  <six-icon size="small" src="/assets/test.svg"></six-icon>
+  <six-icon size="large" src="/assets/test.svg"></six-icon>
+  <six-icon size="xxLarge" src="/assets/test.svg"></six-icon>
+</div>
+```
+
+
+##### SVG inline
+
+When you add the inline-svg attribute, the svg is rendered as svg.
+This allows the icon to be styled from the outside (for example, using fill, stroke, or theme colors on a parent element), 
+which is the main difference compared to the default external rendering above.
+The only downside is that the browser does not cache it.
+
+<docs-demo-six-icon-13></docs-demo-six-icon-13>
+
+```html
+<div style="display: flex; gap: 1em; min-height: 6rem; align-items: center; fill: red">
+  <six-icon size="xSmall" src="/assets/test.svg" inline-svg></six-icon>
+  <six-icon size="small" src="/assets/test.svg" inline-svg></six-icon>
+  <six-icon size="large" src="/assets/test.svg" inline-svg></six-icon>
+  <six-icon size="xxLarge" src="/assets/test.svg" inline-svg></six-icon>
+</div>
+```
+
+
 
 <!-- Auto Generated Below -->
 
 
 ## Properties
 
-| Property  | Attribute | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Type                                                                                             | Default     |
-| --------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
-| `filled`  | `filled`  | If set to true the default material outlined icons are not used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `boolean`                                                                                        | `false`     |
-| `library` | `library` | Icon library to use when no `library` prop is provided. By default, all `<six-icon>` instances fall back to the globally configured default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`), which is `"material-icons"` unless changed at runtime.  This allows teams to switch the default across an entire project without having to set the `library` prop on every `<six-icon>` instance.  Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols | `"material-icons" \| "material-symbols" \| undefined`                                            | `undefined` |
-| `size`    | `size`    | The icon's size.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `"inherit" \| "large" \| "medium" \| "small" \| "xLarge" \| "xSmall" \| "xxLarge" \| "xxxLarge"` | `'inherit'` |
+| Property    | Attribute    | Description                                                                                                                                                                                                                             | Type                                                                                             | Default     |
+| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
+| `filled`    | `filled`     | If set to true the default material outlined icons are not used.                                                                                                                                                                        | `boolean`                                                                                        | `false`     |
+| `inlineSvg` | `inline-svg` | If the src is a svg, either render <svg><use/></svg> or <img>  - <svg><use/></svg> is better for styling (e.g. fill: red), but slower at rendering. - <img> is better for HTTP caching, but you cannot style the internal SVG elements. | `boolean`                                                                                        | `false`     |
+| `library`   | `library`    | Icon library for this instance. Overrides the global default. - "material-icons"    → Material Icons - "material-symbols"  → Material Symbols                                                                                           | `"material-icons" \| "material-symbols" \| undefined`                                            | `undefined` |
+| `size`      | `size`       | The icon's size.                                                                                                                                                                                                                        | `"inherit" \| "large" \| "medium" \| "small" \| "xLarge" \| "xSmall" \| "xxLarge" \| "xxxLarge"` | `'inherit'` |
+| `src`       | `src`        | Name of the icon, path to SVG file or a data image                                                                                                                                                                                      | `string \| undefined`                                                                            | `undefined` |
 
 
 ## Slots
 
-| Slot | Description                            |
-| ---- | -------------------------------------- |
-|      | Used to define the material icon name. |
+| Slot | Description                                                                 |
+| ---- | --------------------------------------------------------------------------- |
+|      | Used to define the material icon or symbol name when `src` is not provided. |
+
+
+## Shadow Parts
+
+| Part    | Description |
+| ------- | ----------- |
+| `"svg"` |             |
 
 
 ## Dependencies

docs/examples/docs-demo-six-icon-0.vue

@@ -5,8 +5,8 @@
           <six-icon>pie_chart</six-icon>
           <six-icon>settings</six-icon>
           <six-icon>sick</six-icon>
-          <six-icon>fort</six-icon>
-          <six-icon>castle</six-icon>
+          <six-icon src="fort"></six-icon>
+          <six-icon src="castle"></six-icon>
         </div>
 
 </div>

docs/examples/docs-demo-six-icon-12.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+
+        <div style="display: flex; gap: 1em; min-height: 6rem; align-items: center">
+          <six-icon size="xSmall" src="/assets/test.svg"></six-icon>
+          <six-icon size="small" src="/assets/test.svg"></six-icon>
+          <six-icon size="large" src="/assets/test.svg"></six-icon>
+          <six-icon size="xxLarge" src="/assets/test.svg"></six-icon>
+        </div>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-icon-12',
+  mounted() {  }
+}
+</script>

docs/examples/docs-demo-six-icon-13.vue

@@ -0,0 +1,21 @@
+<template>
+<div>
+
+        <div style="display: flex; gap: 1em; min-height: 6rem; align-items: center; fill: red">
+          <six-icon size="xSmall" src="/assets/test.svg" inline-svg></six-icon>
+          <six-icon size="small" src="/assets/test.svg" inline-svg></six-icon>
+          <six-icon size="large" src="/assets/test.svg" inline-svg></six-icon>
+          <six-icon size="xxLarge" src="/assets/test.svg" inline-svg></six-icon>
+        </div>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-icon-13',
+  mounted() {  }
+}
+</script>

libraries/ui-library-angular/src/lib/stencil-generated/components.ts

@@ -810,14 +810,14 @@ export declare interface SixHeaderMenuButton extends Components.SixHeaderMenuBut
 
 
 @ProxyCmp({
-  inputs: ['filled', 'library', 'size']
+  inputs: ['filled', 'inlineSvg', 'library', 'name', 'size', 'src']
 })
 @Component({
   selector: 'six-icon',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['filled', 'library', 'size'],
+  inputs: ['filled', 'inlineSvg', 'library', 'name', 'size', 'src'],
   standalone: false
 })
 export class SixIcon {

libraries/ui-library-vue/src/lib/stencil-generated/components.ts

@@ -353,6 +353,9 @@ export const SixHeaderMenuButton: StencilVueComponent<JSX.SixHeaderMenuButton> =
 
 
 export const SixIcon: StencilVueComponent<JSX.SixIcon> = /*@__PURE__*/ defineContainer<JSX.SixIcon>('six-icon', undefined, [
+  'name',
+  'src',
+  'inlineSvg',
   'size',
   'filled',
   'library'

libraries/ui-library/src/components.d.ts

@@ -1045,6 +1045,17 @@ export namespace Components {
     /**
      * @since 1.0
      * @status stable
+     * @summary Renders a Material icon, Material Symbol, or external SVG source in a unified way.
+     * - Without `src`, it renders a ligature-based Material icon / symbol using the component’s text content.
+     * - With `src` pointing to an image or SVG file, it renders either an `<img>` or `<svg><use/></svg>` sprite.
+     * @csspart svg - The `<svg>` element when `inlineSvg` is true.
+     * @prop {string} [src] - Icon name, path to an SVG file, or data URL.
+     * @prop {boolean} [inlineSvg=false] - When `true` and `src` is an SVG, renders `<svg><use/></svg>` instead of `<img>`.
+     * @prop {'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'} [size='inherit']
+     * Visual size of the icon.
+     * @prop {boolean} [filled=false] - For Material fonts, toggles between outlined and filled variants when available.
+     * @prop {'material-icons' | 'material-symbols'} [library]
+     * Icon library to use when rendering ligature-based Material icons. Defaults to the globally configured library.
      */
     interface SixIcon {
         /**
@@ -1053,9 +1064,18 @@ export namespace Components {
          */
         "filled": boolean;
         /**
-          * Icon library to use when no `library` prop is provided. By default, all `<six-icon>` instances fall back to the globally configured default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`), which is `"material-icons"` unless changed at runtime.  This allows teams to switch the default across an entire project without having to set the `library` prop on every `<six-icon>` instance.  Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols
+          * If the src is a svg, either render <svg><use/></svg> or <img>  - <svg><use/></svg> is better for styling (e.g. fill: red), but slower at rendering. - <img> is better for HTTP caching, but you cannot style the internal SVG elements.
+          * @default false
+         */
+        "inlineSvg": boolean;
+        /**
+          * Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols
          */
         "library"?: IconLibrary;
+        /**
+          * Name of the icon
+         */
+        "name"?: string;
         /**
           * The icon's size.
           * @default 'inherit'
@@ -1068,6 +1088,10 @@ export namespace Components {
     | 'xLarge'
     | 'xxLarge'
     | 'xxxLarge';
+        /**
+          * Path to SVG file or a data image
+         */
+        "src"?: string;
     }
     /**
      * @since 1.0
@@ -3106,6 +3130,17 @@ declare global {
     /**
      * @since 1.0
      * @status stable
+     * @summary Renders a Material icon, Material Symbol, or external SVG source in a unified way.
+     * - Without `src`, it renders a ligature-based Material icon / symbol using the component’s text content.
+     * - With `src` pointing to an image or SVG file, it renders either an `<img>` or `<svg><use/></svg>` sprite.
+     * @csspart svg - The `<svg>` element when `inlineSvg` is true.
+     * @prop {string} [src] - Icon name, path to an SVG file, or data URL.
+     * @prop {boolean} [inlineSvg=false] - When `true` and `src` is an SVG, renders `<svg><use/></svg>` instead of `<img>`.
+     * @prop {'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'} [size='inherit']
+     * Visual size of the icon.
+     * @prop {boolean} [filled=false] - For Material fonts, toggles between outlined and filled variants when available.
+     * @prop {'material-icons' | 'material-symbols'} [library]
+     * Icon library to use when rendering ligature-based Material icons. Defaults to the globally configured library.
      */
     interface HTMLSixIconElement extends Components.SixIcon, HTMLStencilElement {
     }
@@ -4833,6 +4868,17 @@ declare namespace LocalJSX {
     /**
      * @since 1.0
      * @status stable
+     * @summary Renders a Material icon, Material Symbol, or external SVG source in a unified way.
+     * - Without `src`, it renders a ligature-based Material icon / symbol using the component’s text content.
+     * - With `src` pointing to an image or SVG file, it renders either an `<img>` or `<svg><use/></svg>` sprite.
+     * @csspart svg - The `<svg>` element when `inlineSvg` is true.
+     * @prop {string} [src] - Icon name, path to an SVG file, or data URL.
+     * @prop {boolean} [inlineSvg=false] - When `true` and `src` is an SVG, renders `<svg><use/></svg>` instead of `<img>`.
+     * @prop {'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'} [size='inherit']
+     * Visual size of the icon.
+     * @prop {boolean} [filled=false] - For Material fonts, toggles between outlined and filled variants when available.
+     * @prop {'material-icons' | 'material-symbols'} [library]
+     * Icon library to use when rendering ligature-based Material icons. Defaults to the globally configured library.
      */
     interface SixIcon {
         /**
@@ -4841,9 +4887,18 @@ declare namespace LocalJSX {
          */
         "filled"?: boolean;
         /**
-          * Icon library to use when no `library` prop is provided. By default, all `<six-icon>` instances fall back to the globally configured default library (via `setDefaultIconLibrary()` / `getDefaultIconLibrary()`), which is `"material-icons"` unless changed at runtime.  This allows teams to switch the default across an entire project without having to set the `library` prop on every `<six-icon>` instance.  Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols
+          * If the src is a svg, either render <svg><use/></svg> or <img>  - <svg><use/></svg> is better for styling (e.g. fill: red), but slower at rendering. - <img> is better for HTTP caching, but you cannot style the internal SVG elements.
+          * @default false
+         */
+        "inlineSvg"?: boolean;
+        /**
+          * Icon library for this instance. Overrides the global default. - "material-icons"  → Material Icons - "material-symbols"  → Material Symbols
          */
         "library"?: IconLibrary;
+        /**
+          * Name of the icon
+         */
+        "name"?: string;
         /**
           * The icon's size.
           * @default 'inherit'
@@ -4856,6 +4911,10 @@ declare namespace LocalJSX {
     | 'xLarge'
     | 'xxLarge'
     | 'xxxLarge';
+        /**
+          * Path to SVG file or a data image
+         */
+        "src"?: string;
     }
     /**
      * @since 1.0
@@ -6615,6 +6674,17 @@ declare module "@stencil/core" {
             /**
              * @since 1.0
              * @status stable
+             * @summary Renders a Material icon, Material Symbol, or external SVG source in a unified way.
+             * - Without `src`, it renders a ligature-based Material icon / symbol using the component’s text content.
+             * - With `src` pointing to an image or SVG file, it renders either an `<img>` or `<svg><use/></svg>` sprite.
+             * @csspart svg - The `<svg>` element when `inlineSvg` is true.
+             * @prop {string} [src] - Icon name, path to an SVG file, or data URL.
+             * @prop {boolean} [inlineSvg=false] - When `true` and `src` is an SVG, renders `<svg><use/></svg>` instead of `<img>`.
+             * @prop {'inherit' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'} [size='inherit']
+             * Visual size of the icon.
+             * @prop {boolean} [filled=false] - For Material fonts, toggles between outlined and filled variants when available.
+             * @prop {'material-icons' | 'material-symbols'} [library]
+             * Icon library to use when rendering ligature-based Material icons. Defaults to the globally configured library.
              */
             "six-icon": LocalJSX.SixIcon & JSXBase.HTMLAttributes<HTMLSixIconElement>;
             /**