Merge pull request #2 from alexanderson1993/optimize

Add an --optimize option to use SVGO to optimize the sprite sheet.

README.md

@@ -59,8 +59,7 @@ npx svg-icons-cli init
 - `-o, --output`: Where to store the Icon component. Defaults to `components/ui`
 - `-t, --types`: Where to store the default type definition file. Defaults to `types/icon-name.d.ts`
 
-> [!NOTE]
-> **Why not export `<Icon>` from this package?**
+> [!NOTE] > **Why not export `<Icon>` from this package?**
 >
 > The `<Icon>` component is built using Tailwind classes, which is my preferred way to write CSS. Your app might use your own classes, CSS modules, or some other styling method. Instead of shipping a million different implementations, the CLI will put a small component in your app that you can modify to your hearts content. Or, you can follow the manual installation instructions below.
 
@@ -250,6 +249,7 @@ npx svg-icons-cli build
 
 - `-i, --input`: The folder where the source SVG icons are stored
 - `-o, --output`: Where to output the sprite sheet and types
+- `--optimize`: Automatically optimize the output SVG using SVGO. You can [configure SVGO](https://github.com/svg/svgo#configuration) by placing a `svgo.config.js` file in the directory where you run the CLI.
 
 > [!TIP]
 > We recommend using the [Sly CLI](https://sly-cli.fly.dev) to bring icons into your project. It can be configured with many icon repositories, and can run the build command after new icons have been added.

index.js

@@ -12,10 +12,12 @@ import {
   note,
   isCancel,
   spinner,
+  confirm,
 } from "@clack/prompts";
 import parseArgv from "tiny-parse-argv";
 import { glob } from "glob";
 import { exec } from "node:child_process";
+import { loadConfig, optimize } from "svgo";
 const cwd = process.cwd();
 
 const args = parseArgv(process.argv.slice(2));
@@ -66,6 +68,7 @@ switch (command) {
   Options:
     -i, --input     The relative path where the source SVGs are stored
     -o, --output    Where the output sprite sheet and types should be stored
+    --optimize      Optimize the output SVG using SVGO. 
     --help          Show help
   `,
         { symbol: "👋" }
@@ -105,6 +108,7 @@ switch (command) {
 }
 
 async function build() {
+  let shouldOptimize = !!args.optimize;
   let input = args.i || args.input;
   let output = args.o || args.output;
   let giveHint = false;
@@ -139,12 +143,18 @@ async function build() {
   }
   if (isCancel(output)) process.exit(1);
   const outputDir = path.join(cwd, output);
-
+  if (typeof args.optimize === "undefined") {
+    const choseOptimize = await confirm({
+      message: "Optimize the output SVG using SVGO?",
+    });
+    if (isCancel(choseOptimize)) process.exit(1);
+    shouldOptimize = choseOptimize;
+  }
   if (giveHint) {
     note(
       `You can also pass these options as flags:
       
-icons build -i ${input} -o ${output}`,
+icons build -i ${input} -o ${output}${shouldOptimize ? " --optimize" : ""}`,
       "Psst"
     );
   }
@@ -183,6 +193,7 @@ icons build -i ${input} -o ${output}`,
       files,
       inputDir,
       outputPath: spriteFilepath,
+      shouldOptimize,
     });
     for (const file of files) {
       logVerbose(`✅ ${file}`);
@@ -523,7 +534,12 @@ function iconName(file) {
 /**
  * Creates a single SVG file that contains all the icons
  */
-async function generateSvgSprite({ files, inputDir, outputPath }) {
+async function generateSvgSprite({
+  files,
+  inputDir,
+  outputPath,
+  shouldOptimize,
+}) {
   // Each SVG becomes a symbol and we wrap them all in a single SVG
   const symbols = await Promise.all(
     files.map(async (file) => {
@@ -541,7 +557,7 @@ async function generateSvgSprite({ files, inputDir, outputPath }) {
       return svg.toString().trim();
     })
   );
-  const output = [
+  let output = [
     `<?xml version="1.0" encoding="UTF-8"?>`,
     `<!-- This file is generated by npm run build:icons -->`,
     `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">`,
@@ -551,6 +567,12 @@ async function generateSvgSprite({ files, inputDir, outputPath }) {
     `</svg>`,
     "", // trailing newline
   ].join("\n");
+
+  if (shouldOptimize) {
+    const config = (await loadConfig()) || undefined;
+    output = optimize(output, config).data;
+  }
+
   return writeIfChanged(outputPath, output);
 }
 async function writeIfChanged(filepath, newContent) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-icons-cli",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -30,6 +30,7 @@
     "clsx": "^2.0.0",
     "glob": "^10.3.10",
     "node-html-parser": "^6.1.11",
+    "svgo": "^3.0.4",
     "tailwind-merge": "^2.0.0",
     "tiny-parse-argv": "^2.2.0",
     "typescript": "^5.2.2"