feat: add src property

src/components.d.ts

@@ -28,6 +28,10 @@ export namespace Components {
     | 'large'   // 24px
     | 'auto'
     | string;
+        /**
+          * Specifies the exact `src` of an SVG file to use.
+         */
+        "src"?: string;
     }
 }
 declare global {
@@ -64,6 +68,10 @@ declare namespace LocalJSX {
     | 'large'   // 24px
     | 'auto'
     | string;
+        /**
+          * Specifies the exact `src` of an SVG file to use.
+         */
+        "src"?: string;
     }
     interface IntrinsicElements {
         "pds-icon": PdsIcon;

src/components/pds-icon/pds-icon.tsx

@@ -52,6 +52,12 @@ export class PdsIcon {
     | 'auto'
     | string = 'regular'
 
+  /**
+   *
+   * Specifies the exact `src` of an SVG file to use.
+   */
+  @Prop() src?: string;
+
   private iconSize() {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const sizes: { [key: string]: any } = {
@@ -86,6 +92,7 @@ export class PdsIcon {
   }
 
   @Watch('name')
+  @Watch('src')
   @Watch('icon')
   loadIcon() {
     if (Build.isBrowser && this.isVisible) {

src/components/pds-icon/readme.md

@@ -13,6 +13,7 @@
 | `icon`   | `icon`    | This a combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any`    | `undefined` |
 | `name`   | `name`    | The name of the icon to use from the built-in set.                                                                                                                                  | `string` | `undefined` |
 | `size`   | `size`    | The size of the icon. This can be 'small', 'regular', 'medium', large, or a custom value (40px, 1rem, etc)                                                                          | `string` | `'regular'` |
+| `src`    | `src`     |  Specifies the exact `src` of an SVG file to use.                                                                                                                                   | `string` | `undefined` |
 
 
 ----------------------------------------------

src/components/pds-icon/utils.ts

@@ -67,7 +67,12 @@ export const getSrc = (src: string | undefined) => {
 }
 
 export const getUrl = (pdsIcon: PdsIcon) => {
-  let url = getName(pdsIcon.name, pdsIcon.icon);
+  let url = getSrc(pdsIcon.src);
+  if (url) {
+    return url;
+  }
+
+  url = getName(pdsIcon.name, pdsIcon.icon);
   if (url) {
     return getNamedUrl(url);
   }