Support custom dir for svg sprite file

Temzasse · Feb 21, 2022 · 1d04ea3 · 1d04ea3
1 parent de7d1d6
commit 1d04ea3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 44 deletions.
diff --git a/example/assets/icons.svg b/example/assets/icons.svg
diff --git a/example/package.json b/example/package.json
@@ -66,7 +66,8 @@
       "icons": {
         "filetype": "svg",
         "sprite": {
-          "writeIds": true
+          "writeIds": true,
+          "spriteDir": "assets"
         }
       }
     }

diff --git a/example/tokens/icons-ids.ts b/example/tokens/icons-ids.ts
@@ -1,2 +1,2 @@
 /* eslint-disable */
-export const ids = ["featherAperture","featherArrowDownLeft","featherArrowLeftCircle","featherCamera","featherCheckCircle","featherCloudLightning","featherEye","featherHeart",];
+export const ids = ["featherAperture","featherArrowDownLeft","featherArrowLeftCircle","featherCamera","featherCheckCircle","featherCloudLightning","featherEye","featherHeart",] as const;
diff --git a/example/tokens/icons.svg b/example/tokens/icons.svg
diff --git a/src/codegen.js b/src/codegen.js
@@ -89,14 +89,22 @@ export default class Codegen {
           const rgx = /<svg.*?>([\s\S]*)<\/svg>/i; // remove wrapping svg tag
           const svgs = tokens.map(([k, v]) => [k, v.match(rgx)[1]]);
 
+          let spriteDir = outDir;
+          let writeIds = false;
+
+          if (typeof config.sprite === "object") {
+            writeIds = Boolean(config.sprite.writeIds);
+
+            if (typeof config.sprite.spriteDir === "string") {
+              spriteDir = config.sprite.spriteDir;
+            }
+          }
+
           fs.writeFileSync(
-            `${outDir}/${filename}.svg`,
+            `${spriteDir}/${filename}.svg`,
             spriteCompiled({ svgs })
           );
 
-          const writeIds =
-            typeof config.sprite === "object" ? config.sprite.writeIds : false;
-
           // Write ids so that we can more easily reference them in TS
           if (writeIds) {
             const idsCompiled = template(SVG_SPRITE_IDS_TEMPLATE, {});
@@ -134,15 +142,14 @@ const TOKEN_TEMPLATE =
   "export const <%= x[0] %> = <%= JSON.stringify(x[1], null, 2) %>;\n" +
   "<% }); %>";
 
-const SVG_SPRITE_TEMPLATE = `/* eslint-disable */
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs><% svgs.forEach(function(x) { %>
-    <symbol viewBox="0 0 24 24" id="<%= x[0] %>">
-      <%= x[1] %>
-    </symbol><% }); %>
-  </defs>
-</svg>
-`;
+const SVG_SPRITE_TEMPLATE =
+  '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
+  "<defs><% svgs.forEach(function(x) { %>" +
+  '<symbol viewBox="0 0 24 24" id="<%= x[0] %>">' +
+  "<%= x[1] %>" +
+  "</symbol><% }); %>" +
+  "</defs>" +
+  "</svg>";
 
 const SVG_SPRITE_IDS_TEMPLATE =
   "/* eslint-disable */\n" +