prepare-svgs-for-icon-block 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 James Hunt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# Prepare SVGs for The Icon Block for WordPress
+
+[The Icon Block](https://wordpress.org/plugins/icon-block/) plugin by [Nick Diego](https://nickdiego.com) registers a single, easy-to-use block that allows you to add custom SVG icons and graphics to the WordPress block editor (Gutenberg).
+
+It's a great plugin and an essential on any WordPress site I build (👋🏻 Hello, [I'm James](https://www.thetwopercent.co.uk)) but all the sites I create need custom icon libraries. Adding custom icons in bulk to The Icon Block is a bit tiring, so I made this utility to spit out a folder of icons in a JS file ready for you to import in to your icon registration file.
+
+Install this npm package on your system and you'll get a zero-config CLI to convert raw SVG files into clean, optimized, ready-to-use icons for your WordPress site.
+
+## Features
+
+- 💾 Exports ready-to-use JavaScript for The Icon Block
+- ✅ Bulk SVG processing — point it at a folder, done.
+- 🧹 Removes bloat — strips out background fills, comments, metadata, etc.
+- 📦 SVGO-powered — optimized using preset-default for max compression + clarity.
+- 🧠 Smart naming — auto-generates name and title from filenames.
+- 🎨 Works with Framed icons (use Advanced options)
+- 🧹 Clean path fills — adds your chosen fill to all icons.
+- ⚡️ No config required — runs out of the box with good defaults.
+- 🖥️ Cross-platform — works on macOS, Linux, and Windows.
+
+## Installation
+
+Install globally via npm:
+
+```sh
+npm install --global prepare-svgs-for-icon-block
+```
+
+This will make the command available anywhere on your system.
+
+## Usage
+
+After you've installed you can navigate to the folder of SVGs you want to convert, and run:
+
+```sh
+$ prepare-svgs
+```
+
+The follow the prompts.
+
+The script is non-destructive on the original SVGs, it doesnt touch them or edit them in anyway.
+
+## Output
+
+Whichever folder you run the script in will get an output.js file in it, which will include all your optimised SVGs.
+
+## Adding custom libraries to The Icon Block
+
+The Icons Block is a static block built with React. Therefore, icons need to be added using JavaScript. Nick Diego has written a great article on [how to add custom icons](https://nickdiego.com/adding-custom-icons-to-the-icon-block/). This script will provide your icons for the part that is specifed:
+
+```js
+const customIcons = []
+```
+
+## Update prepare-svgs-for-icon-block
+
+To update to the latest version you can just run the install command again - `npm install -g prepare-svgs-for-icon-block`
+
+## Feedback and issues
+
+Please open an issue in the [GitHub repo](https://github.com/thetwopct/prepare-svgs-for-icon-block/issues). Thanks.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
+
+## Changelog
+
+1.0.0
+Initial release

package/bin/prepare-svgs.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+
+import inquirer from 'inquirer';
+import { processSvgs } from '../lib/process.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const questions = [
+	{
+		type: 'input',
+		name: 'directory',
+		message: 'Folder of SVGs:',
+		default: process.cwd(),
+	},
+	{
+		type: 'confirm',
+		name: 'advanced',
+		message: 'Advanced options:',
+		default: false,
+	}
+];
+
+const answers = await inquirer.prompt(questions);
+
+let options = {
+	directory: path.resolve(answers.directory),
+	framedIcons: false,
+	forcePathColor: false,
+	fillColor: '#252321'
+};
+
+if (answers.advanced) {
+	const advancedAnswers = await inquirer.prompt([
+		{
+			type: 'confirm',
+			name: 'framedIcons',
+			message: 'Framed Icons - remove fills from outer frame:',
+			default: false,
+		},
+		{
+			type: 'confirm',
+			name: 'forcePathColor',
+			message: 'Force Path color:',
+			default: false,
+		}
+	]);
+
+	options.framedIcons = advancedAnswers.framedIcons;
+	options.forcePathColor = advancedAnswers.forcePathColor;
+
+	if (advancedAnswers.forcePathColor) {
+		const colorAnswer = await inquirer.prompt([
+			{
+				type: 'input',
+				name: 'fillColor',
+				message: 'Fill color for <path>:',
+				default: '#252321',
+			}
+		]);
+		options.fillColor = colorAnswer.fillColor;
+	}
+}
+
+processSvgs(options);

package/lib/process.js

@@ -0,0 +1,66 @@
+import fs from 'fs';
+import path from 'path';
+import { optimize } from 'svgo';
+import chalk from 'chalk';
+
+export function processSvgs(options) {
+	const { directory: svgDir, framedIcons, forcePathColor, fillColor } = options;
+	const output = [];
+	const files = fs.readdirSync(svgDir);
+
+	files.forEach(file => {
+		if (!file.endsWith('.svg')) return;
+
+		const filePath = path.join(svgDir, file);
+		let svg = fs.readFileSync(filePath, 'utf8');
+
+		const { data: optimised } = optimize(svg, {
+			path: filePath,
+			multipass: true,
+			plugins: [
+				{
+					name: 'preset-default',
+					params: {
+						overrides: {
+							removeViewBox: false
+						}
+					}
+				},
+			],
+		});
+
+		let cleaned = optimised;
+
+		// Apply framed icons transformations if enabled
+		if (framedIcons) {
+			cleaned = cleaned
+				.replace(/<svg([^>]*)\sfill="[^"]*"/, '<svg$1')
+				.replace(/<rect([^>]*)\sfill="[^"]*"/, '<rect$1')
+				.replace(/<path([^>]*?)\sfill="[^"]*"/g, '<path$1');
+		}
+
+		// Apply force path color if enabled
+		if (forcePathColor) {
+			cleaned = cleaned.replace(/<path([^>]*?)>/g, `<path fill="${fillColor}"$1>`);
+		}
+
+		const rawName = path.basename(file, '.svg');
+		const name = rawName.toLowerCase().replace(/\s+/g, '-');
+		const title = rawName.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+
+		output.push({ name, title, icon: cleaned });
+	});
+
+	const outPath = path.join(svgDir, 'output.js');
+	const outputJs = output
+  .map(({ name, title, icon }) => {
+    return `\t{\n\t\tname: '${name}',\n\t\ttitle: '${title}',\n\t\ticon: '${icon}'\n\t}`;
+  })
+  .join(',\n');
+
+	fs.writeFileSync(
+		path.join(svgDir, 'output.js'),
+		`const customIcons = [\n${outputJs}\n];\n`
+	);
+	console.log(chalk.green(`✅ Saved to ${outPath}`));
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "prepare-svgs-for-icon-block",
+	"version": "1.0.0",
+	"description": "Zero-config CLI to convert raw SVG files into clean, optimized, ready-to-use icons suitable for The Icon Block for WordPress",
+	"author": "James Hunt",
+	"license": "MIT",
+	"bin": {
+		"prepare-svgs": "./bin/prepare-svgs.js"
+	},
+	"dependencies": {
+		"chalk": "^5.4.1",
+		"inquirer": "^9.3.7",
+		"svgo": "^3.3.2"
+	},
+	"type": "module",
+	"keywords": [
+		"svg",
+		"icon",
+		"wordpress",
+		"cli",
+		"optimize",
+		"the-icon-block"
+	],
+	"engines": {
+		"node": ">=18"
+	},
+	"files": [
+		"bin/",
+		"lib/",
+		"README.md"
+	]
+}