From 6d46d7401ac0b74468e04538428958ed7b2c9ee3 Mon Sep 17 00:00:00 2001
From: Julian Skinner <ju.skinner@gmail.com>
Date: Fri, 5 Jan 2024 11:11:04 -0600
Subject: [PATCH] feat: add src property

---
 src/components.d.ts                  | 8 ++++++++
 src/components/pds-icon/pds-icon.tsx | 7 +++++++
 src/components/pds-icon/readme.md    | 1 +
 src/components/pds-icon/utils.ts     | 7 ++++++-
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 76a7003..7e224ab 100644
--- a/src/components.d.ts
+++ b/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;
diff --git a/src/components/pds-icon/pds-icon.tsx b/src/components/pds-icon/pds-icon.tsx
index 0e0a385..8528a40 100644
--- a/src/components/pds-icon/pds-icon.tsx
+++ b/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) {
diff --git a/src/components/pds-icon/readme.md b/src/components/pds-icon/readme.md
index 1e33a67..aebc94d 100644
--- a/src/components/pds-icon/readme.md
+++ b/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` |
 
 
 ----------------------------------------------
diff --git a/src/components/pds-icon/utils.ts b/src/components/pds-icon/utils.ts
index edf053a..f2d25a1 100644
--- a/src/components/pds-icon/utils.ts
+++ b/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);
   }