svg-icon-baker 1.1.2 → 1.2.0

package/README.md

@@ -2,52 +2,55 @@
 
 > Bake the `svg` icon into `symbol` 🍪
 
-The core library for transforming SVG icons into optimized SVG symbol sprite.
+The core library for transforming SVG icons into optimized SVG symbol sprites.
 
 If you like this project, please give it a [Star](https://github.com/yangxu52/svg-icon-baker).
 
 ## Usage
 
-```js
-import { bakeIcon } from 'svg-icon-baker'
+```ts
+import { bakeIcon, bakeIcons } from 'svg-icon-baker'
+
+const source = { name: 'home', content: '<svg viewBox="0 0 16 16">...</svg>' }
+const result = bakeIcon(source)
+// result: { name: 'home', content: '<symbol id="home" viewBox="0 0 16 16">...</symbol>' }
 
-const source = { name: 'home', content: '<svg>...</svg>' }
-const result = await bakeIcon(source)
-// result: { name: 'home', symbol: '<symbol>...</symbol>' }
+const results = bakeIcons([source])
 ```
 
+`bakeIcon` and `bakeIcons` are synchronous.
+
 ## API
 
 ### `bakeIcon(source: BakeSource, options?: Options): BakeResult`
 
-convert SVG into symbols.
+Convert one SVG into one symbol result.
 
 ### `bakeIcons(sources: BakeSource[], options?: Options): BakeResult[]`
 
-batch convert SVG into symbols.
+Convert multiple SVG inputs with one inferred option set.
 
 ## Options
 
-| name                      | type      | default | description                                        |
-| ------------------------- | --------- | ------- | -------------------------------------------------- |
-| `defaultPreset`           | `boolean` | `true`  | Enable SVGO `preset-default`.                      |
-| `convertOneStopGradients` | `boolean` | `false` | Convert one-stop gradients.                        |
-| `convertStyleToAttrs`     | `boolean` | `false` | Convert style blocks to attributes.                |
-| `reusePaths`              | `boolean` | `false` | Try to reuse identical paths.                      |
-| `removeScripts`           | `boolean` | `false` | Drop `<script>` for safety.                        |
-| `removeTitle`             | `boolean` | `true`  | Remove `<title>` elements from symbols.            |
-| `removeXMLNS`             | `boolean` | `true`  | Remove xmlns on root (not needed inside sprite).   |
-| `removeXlink`             | `boolean` | `true`  | Remove xlink namespace (modern browsers use href). |
+| name          | type          | default | description                                      |
+| ------------- | ------------- | ------- | ------------------------------------------------ |
+| `optimize`    | `boolean`     | `true`  | Enable default safe SVGO optimization preset.    |
+| `svgoOptions` | `SvgoOptions` | `{}`    | Custom SVGO options into the optimization layer. |
 
 Notes:
 
-- set `true` to enable default optimizations. set `false` to disable all optimizations.
-- The library prefixes internal ids and URL references via SVGO `prefixIds`, using the icon name as prefix (e.g., `name-xxxxx`).
-- Width/height on the root `<svg>` are removed; viewBox is required or inferred by SVGO from width/height when possible.
+- Behavior matrix:
+  - `optimize: true` + no `svgoOptions`: run default safe optimization.
+  - `optimize: true` + `svgoOptions`: run default safe optimization, then merge custom options.
+  - `optimize: false` + no `svgoOptions`: skip optimization layer.
+  - `optimize: false` + `svgoOptions`: run custom optimization settings only.
+- When `svgoOptions.plugins` is provided, custom plugins run after default safe optimization plugins.
 
 ## Type Definitions
 
 ```ts
+import type { Config } from 'svgo'
+
 type BakeSource = {
   name: string
   content: string
@@ -55,28 +58,22 @@ type BakeSource = {
 
 type BakeResult = {
   name: string
-  symbol: string
+  content: string
 }
 
-type Options =
-  | {
-      defaultPreset?: boolean
-      convertOneStopGradients?: boolean
-      convertStyleToAttrs?: boolean
-      reusePaths?: boolean
-      removeScripts?: boolean
-      removeTitle?: boolean
-      removeXMLNS?: boolean
-      removeXlink?: boolean
-    }
-  | boolean
+type SvgoOptions = Pick<Config, 'multipass' | 'floatPrecision' | 'js2svg' | 'plugins'>
+
+type Options = {
+  optimize?: boolean
+  svgoOptions?: SvgoOptions
+}
 ```
 
 ## Features
 
-- 🎯 SVG Optimization - Remove redundant data and optimize paths
-- 🔗 Reference Handling - Properly namespace IDs and class names
-- 🎨 ViewBox Management - Ensure consistent sizing
+- 🎯 Optimization: Reduce file size, and improve efficiency through `SVGO`
+- 🔗 Reference Handling: ID and reference prefixing for sprite safety
+- 🎨 Size Unify: `viewBox` preservation or inference from root dimensions
 
 ## License
 

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+import { Config } from 'svgo';
+
 type BakeSource = {
     name: string;
     content: string;
@@ -6,52 +8,21 @@ type BakeResult = {
     name: string;
     content: string;
 };
-type ManualOptions = {
-    /**
-     * default plugin preset
-     * @default true
-     */
-    defaultPreset?: boolean;
-    /**
-     * convert one stop gradients to inline styles
-     * @default false
-     */
-    convertOneStopGradients?: boolean;
-    /**
-     * convert style to attrs
-     * @default false
-     */
-    convertStyleToAttrs?: boolean;
+type SvgoOptions = Pick<Config, 'multipass' | 'floatPrecision' | 'js2svg' | 'plugins'>;
+type Options = {
     /**
-     * reuse paths
-     * @default false
-     */
-    reusePaths?: boolean;
-    /**
-     * remove scripts
-     * @default false
-     */
-    removeScripts?: boolean;
-    /**
-     * remove title
+     * enable/disable default safe optimization preset
      * @default true
      */
-    removeTitle?: boolean;
+    optimize?: boolean;
     /**
-     * remove xmlns
-     * @default true
-     */
-    removeXMLNS?: boolean;
-    /**
-     * remove xlink
-     * @default true
+     * custom svgo options merged into optimizer
      */
-    removeXlink?: boolean;
+    svgoOptions?: SvgoOptions;
 };
-type Options = boolean | ManualOptions;
 
 declare function bakeIcon(source: BakeSource, options?: Options): BakeResult;
 declare function bakeIcons(sources: BakeSource[], options?: Options): BakeResult[];
 
 export { bakeIcon, bakeIcons };
-export type { BakeResult, BakeSource, Options };
+export type { BakeResult, BakeSource, Options, SvgoOptions };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import { Config } from 'svgo';
+
 type BakeSource = {
     name: string;
     content: string;
@@ -6,52 +8,21 @@ type BakeResult = {
     name: string;
     content: string;
 };
-type ManualOptions = {
-    /**
-     * default plugin preset
-     * @default true
-     */
-    defaultPreset?: boolean;
-    /**
-     * convert one stop gradients to inline styles
-     * @default false
-     */
-    convertOneStopGradients?: boolean;
-    /**
-     * convert style to attrs
-     * @default false
-     */
-    convertStyleToAttrs?: boolean;
+type SvgoOptions = Pick<Config, 'multipass' | 'floatPrecision' | 'js2svg' | 'plugins'>;
+type Options = {
     /**
-     * reuse paths
-     * @default false
-     */
-    reusePaths?: boolean;
-    /**
-     * remove scripts
-     * @default false
-     */
-    removeScripts?: boolean;
-    /**
-     * remove title
+     * enable/disable default safe optimization preset
      * @default true
      */
-    removeTitle?: boolean;
+    optimize?: boolean;
     /**
-     * remove xmlns
-     * @default true
-     */
-    removeXMLNS?: boolean;
-    /**
-     * remove xlink
-     * @default true
+     * custom svgo options merged into optimizer
      */
-    removeXlink?: boolean;
+    svgoOptions?: SvgoOptions;
 };
-type Options = boolean | ManualOptions;
 
 declare function bakeIcon(source: BakeSource, options?: Options): BakeResult;
 declare function bakeIcons(sources: BakeSource[], options?: Options): BakeResult[];
 
 export { bakeIcon, bakeIcons };
-export type { BakeResult, BakeSource, Options };
+export type { BakeResult, BakeSource, Options, SvgoOptions };

package/dist/index.mjs

@@ -1 +1 @@
-import{optimize as m}from"svgo";function l(e,r){const t=a(r),n=i(t);return{name:e.name,content:o(e,n)}}function u(e,r){const t=a(r),n=i(t);return e.map(s=>({name:s.name,content:o(s,n)}))}function o(e,r){if(!e||!e.name||!e.content)throw new TypeError("Property name and content are required.");if(!/^[A-Za-z][A-Za-z0-9_-]*$/.test(e.name))throw new TypeError("Invalid name. Use letters, numbers, dash, or underscore, starting with a letter.");r.push({name:"prefixIds",params:{prefix:`${e.name}-`,delim:""}});let t;try{t=m(e.content,{plugins:r})}catch(s){throw new Error(`Parsing failed. ${String(s)}`)}const n=t.data.match(/viewBox="([^"]+)"/)?.[1];if(!n)throw new Error("Cannot determine viewBox. Provide an SVG with viewBox or width/height attributes.");return t.data.replace(/^\s*<\?xml[^>]*\?>\s*/i,"").replace(/^\s*<svg\b[^>]*>/i,`<symbol id="${e.name}" viewBox="${n}">`).replace(/<\/svg>\s*$/i,"</symbol>").trim()}function a(e){const r={defaultPreset:!0,convertOneStopGradients:!1,convertStyleToAttrs:!1,reusePaths:!1,removeScripts:!1,removeTitle:!0,removeXMLNS:!0,removeXlink:!0};return typeof e=="boolean"?e?r:{defaultPreset:!1,convertOneStopGradients:!1,convertStyleToAttrs:!1,reusePaths:!1,removeScripts:!1,removeTitle:!1,removeXMLNS:!1,removeXlink:!1}:{...r,...e||{}}}function i(e){const r=[];return e.defaultPreset&&r.push({name:"preset-default",params:{overrides:{removeUselessDefs:!1,removeHiddenElems:!1,removeUnknownsAndDefaults:!1,collapseGroups:!1,mergePaths:!1,convertShapeToPath:!1}}}),e.convertOneStopGradients&&r.push({name:"convertOneStopGradients"}),e.convertStyleToAttrs&&r.push({name:"convertStyleToAttrs"}),e.reusePaths&&r.push({name:"reusePaths"}),e.removeScripts&&r.push({name:"removeScripts"}),e.removeTitle&&r.push({name:"removeTitle"}),e.removeXMLNS&&r.push({name:"removeXMLNS"}),e.removeXlink&&r.push({name:"removeXlink"}),r.push({name:"removeDimensions"}),r}export{l as bakeIcon,u as bakeIcons};
+import{optimize as m}from"svgo";const p={name:"preset-default",params:{overrides:{removeUselessDefs:!1,removeHiddenElems:!1,removeUnknownsAndDefaults:!1,collapseGroups:!1,mergePaths:!1,convertShapeToPath:!1}}},l=[{name:"removeTitle"},{name:"removeXMLNS"},{name:"removeXlink"}],c=new Set(["prefixIds"]);function i(e){const n=e??{};return{optimize:n.optimize??!0,svgoOptions:n.svgoOptions??{}}}function u(e,n){const t=[];return n.optimize&&(t.push(p),t.push(...l)),n.svgoOptions.plugins!=null&&t.push(...f(n.svgoOptions.plugins)),t.push(...g(e)),{multipass:n.svgoOptions.multipass,floatPrecision:n.svgoOptions.floatPrecision,js2svg:n.svgoOptions.js2svg,plugins:t}}function f(e){return e.filter(n=>{const t=v(n);return t==null?!0:!c.has(t)})}function v(e){return typeof e=="string"?e:e&&typeof e=="object"&&"name"in e&&typeof e.name=="string"?e.name:null}function g(e){return[{name:"removeDimensions"},{name:"prefixIds",params:{prefix:`${e}-`,delim:""}}]}function h(e,n){const t=i(n);return{name:e.name,content:a(e,t)}}function d(e,n){const t=i(n);return e.map(r=>({name:r.name,content:a(r,t)}))}function a(e,n){if(!e||!e.name||!e.content)throw new TypeError("Property name and content are required.");if(!/^[A-Za-z][A-Za-z0-9_-]*$/.test(e.name))throw new TypeError("Invalid name. Use letters, numbers, dash, or underscore, starting with a letter.");let t;try{t=m(e.content,u(e.name,n))}catch(s){throw new Error(`Parsing failed. ${String(s)}`)}const r=t.data.match(/viewBox="([^"]+)"/)?.[1];if(!r)throw new Error("Cannot determine viewBox. Provide an SVG with viewBox or width/height attributes.");const o=t.data.replace(/^\s*<\?xml[^>]*\?>\s*/i,"");return w(o,e.name,r)}function w(e,n,t){const r=e.match(/^\s*<svg\b[^>]*>/i)[0].replace(/^\s*<svg\b/i,"").replace(/>\s*$/i,"").replace(/\s+id=(['"])[^'"]*\1/gi,"").replace(/\s+viewBox=(['"])[^'"]*\1/gi,"").replace(/\s+width=(['"])[^'"]*\1/gi,"").replace(/\s+height=(['"])[^'"]*\1/gi,"").trim(),o=r?` ${r}`:"",s=`<symbol id="${n}" viewBox="${t}"${o}>`;return e.replace(/^\s*<svg\b[^>]*>/i,s).replace(/<\/svg>\s*$/i,"</symbol>").trim()}export{h as bakeIcon,d as bakeIcons};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-icon-baker",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "A delightful toolkit for baking raw SVG icons into delicious SVG symbol sprites",
   "keywords": [
     "svg",