Merge pull request #319 from phosphor-icons/raw-svg-dl

feat(app): add option to download raw svg

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phosphor-home",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "license": "MIT",
   "homepage": "https://phosphoricons.com",
   "author": {

src/components/IconGrid/IconGrid.css

@@ -212,8 +212,9 @@ figcaption > p {
   align-items: center;
   justify-content: flex-start; */
   display: inline-grid;
-  grid-template-columns: 66px 66px 92px;
+  grid-template-columns: 1fr 1fr;
-  gap: 6px;
+  max-height: 60px;
+  /* gap: 6px; */
 }
 
 .action-button {
@@ -255,6 +256,10 @@ figcaption > p {
     margin-inline: -10px;
     border-radius: 0;
   }
+
+  .detail-actions {
+    display: inline-flex;
+  }
 }
 
 @media screen and (max-width: 536px) {

src/components/IconGrid/Panel.tsx

@@ -260,6 +260,18 @@ const Panel = () => {
     );
   };
 
+  const handleDownloadRawSVG = async () => {
+    if (!entry) return;
+
+    const { name } = entry;
+    saveAs(
+      `https://raw.githubusercontent.com/phosphor-icons/core/main/raw/${weight}/${name}${
+        weight === "regular" ? "" : `-${weight}`
+      }.svg`,
+      `${entry?.name}${weight === "regular" ? "" : `-${weight}`}.svg`
+    );
+  };
+
   const handleDownloadPNG = async (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
@@ -340,6 +352,13 @@ const Panel = () => {
                       onClick={handleDownloadSVG}
                     />
 
+                    <ActionButton
+                      label="SVG Raw"
+                      title="Download raw SVG including original strokes"
+                      download
+                      onClick={handleDownloadRawSVG}
+                    />
+
                     <ActionButton
                       label="SVG"
                       title="Copy SVG"