✨ added svgoPlugins to configure sprite symbols

.github/workflows/publish.yaml

@@ -31,7 +31,7 @@ jobs:
         id: changesets
         uses: changesets/action@v1
         with:
-          publish: pnpm publish -r --access=public
+          publish: pnpm publish -r
           commit: '✅ chore: update version'
           title: '✅ chore: update version'
         env:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oviirup/sprite",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "displayName": "sprite",
   "description": "Create svg sprite from svg files",
   "repository": {
@@ -53,6 +53,10 @@
     "tsx": "^4",
     "typescript": "^5"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
   "lint-staged": {
     "*": "prettier -w -u"
   }

src/index.ts

@@ -12,6 +12,7 @@ export async function build(opts: SpriteConfig) {
   const inputPath = config.input;
   const outputPath = config.output;
   const cwd = config.cwd;
+  const plugins = config.svgoPlugins;
 
   // start performance counter
   const timer = performance.now();
@@ -55,7 +56,7 @@ export async function build(opts: SpriteConfig) {
   // get svg icons and convert to symbols
   const svgIcons = await getSvgIcons(svgFilePaths);
   // create sprite files
-  const result = await createSpriteFiles({ svgIcons, outputPath, cwd, timer });
+  const result = await createSpriteFiles({ svgIcons, config, timer });
 
   return result;
 }

src/types.d.ts

@@ -1,10 +1,21 @@
+import type { PluginConfig } from 'svgo';
+
 export type SpriteConfig = {
   cwd?: string;
   input?: string;
   output?: string;
   prefix?: string;
+  /** Clear out output files */
   clear?: boolean;
+  /** Enable watch mode */
   watch?: boolean;
+  /**
+   * Add custom svgo plugin. Read the official documentation for more details
+   *
+   * @since 0.0.4
+   * @see https://svgo.dev/docs/plugins/
+   */
+  svgoPlugins?: PluginConfig[];
 };
 
 export type ResolvedConfig = Required<SpriteConfig>;

src/utils/config.ts

@@ -25,6 +25,8 @@ export async function resolveConfig(
   config.clear ??= false;
   config.input = path.resolve(config.cwd, config.input);
   config.output = path.resolve(config.cwd, config.output);
+  config.prefix ??= '';
+  config.svgoPlugins ??= [];
 
   return config;
 }

src/utils/sprite.ts

@@ -1,14 +1,18 @@
-import path from 'path';
 import { parse } from 'node-html-parser';
 import * as pi from 'picocolors';
 import * as svgo from 'svgo';
 import { PresetDefaultOverrides } from 'svgo/plugins/plugins-types';
-import { IconData } from '../types';
-import { composeFileName, relativePath, writeFile } from './files';
-import { getByteSize, getHash, logger, outputFileNames } from './helpers';
+import { IconData, ResolvedConfig } from '../types';
+import { relativePath, writeFile } from './files';
+import { logger, outputFileNames } from './helpers';
 
-type SymbolProps = { name: string; content: string };
-export function convertToSymbol({ name, content }: SymbolProps) {
+type SymbolProps = {
+  name: string;
+  content: string;
+  config: ResolvedConfig;
+};
+export function convertToSymbol({ name, content, config }: SymbolProps) {
+  const { svgoPlugins } = config;
   const svgRoot = parse(content);
   const svg = svgRoot.getElementsByTagName('svg')[0];
   if (!svg) throw new Error('Unable to parse svg contents');
@@ -29,6 +33,7 @@ export function convertToSymbol({ name, content }: SymbolProps) {
     plugins: [
       { name: 'preset-default', params: { overrides: presetOverrides } },
       { name: 'removeAttrs', params: { attrs: removeAttrs } },
+      ...svgoPlugins,
     ],
   });
 
@@ -37,20 +42,19 @@ export function convertToSymbol({ name, content }: SymbolProps) {
 
 type SpriteFileProps = {
   svgIcons: IconData[];
-  outputPath: string;
-  cwd: string;
+  config: ResolvedConfig;
   timer?: number;
 };
 export async function createSpriteFiles({
   svgIcons,
-  outputPath,
-  cwd,
+  config,
   timer,
 }: SpriteFileProps) {
-  const files = outputFileNames(outputPath);
+  const { output, cwd } = config;
+  const files = outputFileNames(output);
 
   // sprite symbols
-  const symbols = svgIcons.map(convertToSymbol);
+  const symbols = svgIcons.map((item) => convertToSymbol({ ...item, config }));
   const spriteContent = [
     `<?xml version="1.0" encoding="utf-8"?>`,
     `<!-- This file is generated by @oviirup/sprite -->`,