From 45a78752344f098900f02f0eefc5f4e9487508d1 Mon Sep 17 00:00:00 2001
From: Belar <belar@belardesign.com>
Date: Sun, 6 Oct 2024 09:01:01 +0000
Subject: [PATCH 1/3] feat: add core-ui icons

---
 bin/config.ts     |  5 +++++
 package-lock.json |  7 +++++++
 package.json      |  1 +
 src/Icon.css      |  3 +++
 src/Icon.tsx      |  1 +
 src/icons.ts      | 11 +++++++++++
 6 files changed, 28 insertions(+)
 create mode 100644 src/Icon.css

diff --git a/bin/config.ts b/bin/config.ts
index f41a5e0..5b96422 100644
--- a/bin/config.ts
+++ b/bin/config.ts
@@ -50,4 +50,9 @@ export const iconPackages = [
     variant: "regular",
     iconsDir: "../node_modules/feather-icons/dist/icons",
   },
+  ...["free", "flag"].map((variant) => ({
+    id: `core-ui`,
+    variant,
+    iconsDir: `../node_modules/@coreui/icons/svg/${variant}`,
+  })),
 ];
diff --git a/package-lock.json b/package-lock.json
index 3b0d738..93e95b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "all-icons-plugin",
       "version": "0.0.0",
       "dependencies": {
+        "@coreui/icons": "^3.0.1",
         "@material-design-icons/svg": "^0.14.13",
         "@penpot/plugin-styles": "^0.10.0",
         "@phosphor-icons/core": "^2.1.1",
@@ -41,6 +42,12 @@
         "vite": "^5.4.8"
       }
     },
+    "node_modules/@coreui/icons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@coreui/icons/-/icons-3.0.1.tgz",
+      "integrity": "sha512-u9UKEcRMyY9pa4jUoLij8pAR03g5g6TLWV33/Mx2ix8sffyi0eO4fLV8DSTQljDCw938zt7KYog5cVKEAJUxxg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
diff --git a/package.json b/package.json
index 810cb8e..55a2dff 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "generate-data": "tsx ./bin/generateIconSets.ts"
   },
   "dependencies": {
+    "@coreui/icons": "^3.0.1",
     "@material-design-icons/svg": "^0.14.13",
     "@penpot/plugin-styles": "^0.10.0",
     "@phosphor-icons/core": "^2.1.1",
diff --git a/src/Icon.css b/src/Icon.css
new file mode 100644
index 0000000..1f45759
--- /dev/null
+++ b/src/Icon.css
@@ -0,0 +1,3 @@
+svg {
+  height: auto;
+}
diff --git a/src/Icon.tsx b/src/Icon.tsx
index c495399..609d7a4 100644
--- a/src/Icon.tsx
+++ b/src/Icon.tsx
@@ -1,4 +1,5 @@
 import { parseAttributes } from "./dataStructure";
+import "./Icon.css";
 
 type IconProps = {
   attributes: string;
diff --git a/src/icons.ts b/src/icons.ts
index 1258499..5ecf973 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -141,6 +141,17 @@ export const iconLibraries: IconLibrary[] = [
     },
     icons: generateVariants("feather", ["regular"]),
   },
+  {
+    id: "core-ui",
+    name: "CoreUI Free",
+    website: "https://coreui.io/icons/",
+    license: {
+      name: "CC BY 4.0, CC0 1.0 Universal",
+      url: "https://github.com/coreui/coreui-icons/blob/main/LICENSE",
+    },
+    icons: generateVariants("core-ui", ["free", "flag"]),
+    defaultSettings: { selectedVariant: "free" },
+  },
 ];
 
 export const defaultIconSetSettings: Record<string, IconSetSettings> =

From 9d94421a3b1fdd792afe7d6c0a4ffe48654c0772 Mon Sep 17 00:00:00 2001
From: Belar <belar@belardesign.com>
Date: Sun, 6 Oct 2024 19:09:32 +0000
Subject: [PATCH 2/3] fix: icon to have correct width-height ratio

---
 src/App.tsx        | 25 +++++++++++++++++--------
 src/Icon.tsx       |  5 ++---
 src/icons.ts       | 12 ++++++++++++
 src/plugin.ts      | 10 ++++++----
 tests/icon.spec.ts | 10 ++++++++--
 5 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 03732a6..0eadf74 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,8 +10,8 @@ import {
   iconLibraries,
   defaultIconSetSettings,
   getIconSetsByVariant,
-  DEFAULT_ICON_SIZE,
   DATA_KEY_ICON_SETS_SETTINGS,
+  getNormalisedIconSize,
 } from "./icons";
 import Select from "./Select";
 import LinkTag from "./LinkTag";
@@ -19,6 +19,7 @@ import { toSortedBy } from "./sort";
 import { Bug, ChevronDown, ChevronRight, Lightbulb } from "lucide-react";
 import { sendMessage } from "./window";
 import { filterByPhrase } from "./search";
+import { parseAttributes } from "./dataStructure";
 
 function App() {
   const url = new URL(window.location.href);
@@ -112,19 +113,23 @@ function App() {
             svg: { attributes, elements },
           },
         ]) => {
+          const parsedAttributes =
+            parseAttributes(`${attributes} ${customSvgAttributes}`) || {};
+
           const svg = `<svg ${attributes}>${elements}</svg>`;
           const icon = (
-            <Icon
-              attributes={`${attributes} ${customSvgAttributes}`}
-              elements={elements}
-            />
+            <Icon attributes={parsedAttributes} elements={elements} />
+          );
+          const size = getNormalisedIconSize(
+            parseInt(parsedAttributes.width, 10),
+            parseInt(parsedAttributes.height, 10),
           );
 
           return (
             <IconButton
               key={`icon-${name}`}
               label={`Insert icon: ${name}`}
-              onClick={() => handleIconButtonClick(name, svg)}
+              onClick={() => handleIconButtonClick(name, svg, size)}
               onMouseEnter={() => setHoveredIcon({ name, library })}
               onMouseLeave={() => setHoveredIcon(null)}
             >
@@ -135,8 +140,12 @@ function App() {
       );
   }
 
-  function handleIconButtonClick(name: string, svg: string) {
-    sendMessage("insert-icon", { name, svg, size: DEFAULT_ICON_SIZE });
+  function handleIconButtonClick(
+    name: string,
+    svg: string,
+    size: { width: number; height: number },
+  ) {
+    sendMessage("insert-icon", { name, svg, size });
   }
 
   function toggleShowIcons(id: string) {
diff --git a/src/Icon.tsx b/src/Icon.tsx
index 609d7a4..3237d68 100644
--- a/src/Icon.tsx
+++ b/src/Icon.tsx
@@ -1,13 +1,12 @@
-import { parseAttributes } from "./dataStructure";
 import "./Icon.css";
 
 type IconProps = {
-  attributes: string;
+  attributes: Record<string, string>;
   elements: string;
 };
 
 export default function Icon({ attributes, elements }: IconProps) {
-  const { class: className, ...rest } = parseAttributes(attributes) || {};
+  const { class: className, ...rest } = attributes || {};
 
   return (
     <svg
diff --git a/src/icons.ts b/src/icons.ts
index 5ecf973..cfca601 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -218,3 +218,15 @@ export function getVariantOptions(icons: IconSetVariant[]) {
     value: variant,
   }));
 }
+
+export function getNormalisedIconSize(
+  originalWidth: number,
+  originalHeight: number,
+) {
+  const ratio =
+    originalWidth && originalHeight ? originalWidth / originalHeight : 1;
+  const width = DEFAULT_ICON_SIZE;
+  const height = Math.round(width / ratio);
+
+  return { width, height };
+}
diff --git a/src/plugin.ts b/src/plugin.ts
index 7e8d198..e06acb0 100644
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -22,10 +22,12 @@ type InsertIconPluginEvent = {
   content: {
     name: string;
     svg: string;
-    size: number;
+    size: IconSize;
   };
 };
 
+type IconSize = { width: number; height: number };
+
 type SetDataPluginEvent = {
   type: "set-plugin-data";
   content: PluginData;
@@ -71,18 +73,18 @@ penpot.ui.onMessage<PluginUIEvent>(({ type, content }) => {
 function insertIcon({
   name,
   svg,
-  size,
+  size: { width, height },
 }: {
   name: string;
   svg: string;
-  size: number;
+  size: IconSize;
 }) {
   const icon = penpot.createShapeFromSvg(svg);
   if (icon) {
     icon.name = name;
     icon.x = penpot.viewport.center.x;
     icon.y = penpot.viewport.center.y;
-    icon.resize(size, size);
+    icon.resize(width, height);
   }
 }
 
diff --git a/tests/icon.spec.ts b/tests/icon.spec.ts
index 2a10d31..6beb770 100644
--- a/tests/icon.spec.ts
+++ b/tests/icon.spec.ts
@@ -5,12 +5,18 @@ const testIcons = [
   {
     name: "a-arrow-down",
     svg: '<svg class="lucide lucide-a-arrow-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 13h6" /> <path d="m2 16 4.5-9 4.5 9" /> <path d="M18 7v9" /> <path d="m14 12 4 4 4-4" /></svg>',
-    size: 24,
+    size: {
+      width: 24,
+      height: 24,
+    },
   },
   {
     name: "pickaxe",
     svg: '<svg class="lucide lucide-pickaxe" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.531 12.469 6.619 20.38a1 1 0 1 1-3-3l7.912-7.912" /> <path d="M15.686 4.314A12.5 12.5 0 0 0 5.461 2.958 1 1 0 0 0 5.58 4.71a22 22 0 0 1 6.318 3.393" /> <path d="M17.7 3.7a1 1 0 0 0-1.4 0l-4.6 4.6a1 1 0 0 0 0 1.4l2.6 2.6a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4z" /> <path d="M19.686 8.314a12.501 12.501 0 0 1 1.356 10.225 1 1 0 0 1-1.751-.119 22 22 0 0 0-3.393-6.319" /></svg>',
-    size: 24,
+    size: {
+      width: 24,
+      height: 24,
+    },
   },
 ];
 

From 77d7540b4c67bd6920125124d79fd6d7ac6361f7 Mon Sep 17 00:00:00 2001
From: Belar <belar@belardesign.com>
Date: Mon, 7 Oct 2024 10:29:38 +0000
Subject: [PATCH 3/3] fix: icon to retain color on theme change

---
 bin/config.ts           | 12 +++++++++++-
 bin/generateIconSets.ts |  6 ++++--
 src/icons.ts            |  5 +++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/bin/config.ts b/bin/config.ts
index 5b96422..6a413e4 100644
--- a/bin/config.ts
+++ b/bin/config.ts
@@ -1,4 +1,12 @@
-export const iconPackages = [
+type IconPackage = {
+  id: string;
+  variant?: string;
+  iconsDir: string;
+  getVariantFromIconName?: (iconName: string) => string;
+  normaliseAttributes?: (svg: string) => string;
+};
+
+export const iconPackages: IconPackage[] = [
   {
     id: "lucide",
     variant: "regular",
@@ -54,5 +62,7 @@ export const iconPackages = [
     id: `core-ui`,
     variant,
     iconsDir: `../node_modules/@coreui/icons/svg/${variant}`,
+    normaliseAttributes: (svg: string) =>
+      svg.replace(/fill="var\(--ci-primary-color, currentColor\)"/g, ""),
   })),
 ];
diff --git a/bin/generateIconSets.ts b/bin/generateIconSets.ts
index 0840084..f465a44 100644
--- a/bin/generateIconSets.ts
+++ b/bin/generateIconSets.ts
@@ -14,6 +14,7 @@ iconPackages.forEach(
     iconsDir,
     variant,
     getVariantFromIconName,
+    normaliseAttributes,
   }: (typeof iconPackages)[number]) => {
     const files = getFilesByExtension(iconsDir, ".svg");
 
@@ -21,8 +22,9 @@ iconPackages.forEach(
     for (const file of files) {
       const svg = readFile(iconsDir, file);
 
-      const attributes = svg.match(/<svg([^>]*)>/)?.[1];
-      const elements = svg.match(/<svg[^>]*>([\s\S]*)<\/svg>/)?.[1];
+      const svgNormalised = normaliseAttributes?.(svg) || svg;
+      const attributes = svgNormalised.match(/<svg([^>]*)>/)?.[1];
+      const elements = svgNormalised.match(/<svg[^>]*>([\s\S]*)<\/svg>/)?.[1];
 
       if (!attributes || !elements) {
         throw new Error(`Failed to parse the SVG: ${file}`);
diff --git a/src/icons.ts b/src/icons.ts
index cfca601..effb2ce 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -150,6 +150,11 @@ export const iconLibraries: IconLibrary[] = [
       url: "https://github.com/coreui/coreui-icons/blob/main/LICENSE",
     },
     icons: generateVariants("core-ui", ["free", "flag"]),
+    iconSettings: {
+      svg: {
+        attributes: 'fill="currentColor"',
+      },
+    },
     defaultSettings: { selectedVariant: "free" },
   },
 ];