Web Origamiでアイコンセットを簡単に作成

Over the years, I’ve used different icon sets on my blog. Right now I use Heroicons.The recommended way to use them is to copy/paste the source from the website directly into your HTML. It’s a pretty straightforward process:Go to the websiteSearch for the icon you wantHover itClick to “Copy SVG”Go back to your IDE and paste itIf you’re using React or Vue, there are also npm packages you can install so you can import the icons as components.But I’m not using either of those frameworks, so I need the raw SVGs and there’s no npm i

In the past, my approach has been to copy the SVGs into individual files in my project, like:src/ icons/ home.svg about.svg search.svg

Then I have a “component” for reading those icons from disk which I use in my template files to inline the SVGs in my HTML. For example:// Some page template file import { Icon } from './Icon.js' const template = `${Icon('search.svg')} Search

` // Icon.js import fs from 'fs' import path from 'path' const __dirname = /* Do the stuff to properly resolve the file path */; export const Icon = (name) => fs.readFileSync( path.join(__dirname, 'icons', name), 'utf8' ).toString();

It’s fine. It works. It’s a lot of node boilerplate to read files from disk.But changing icons is a bit of a pain. I have to find new SVGs, overwrite my existing ones, re-commit them to source control, etc.I suppose it would be nice if I could just npm i heroicons

Names are different between icon packs, so when you switch, names don’t match. For example, an icon might be named search

magnifying-glass

Icon packs are often quite large and you only need a subset. npm i icon-pack

So the project’s npm packages don’t provide the raw SVGs. The website does, but I want a more programatic way to easily grab the icons I want.How can I do this?Enter Origami

I’m using Web Origami for my blog which makes it easy to map icons I use in my templates to Heroicons hosted on Github. It doesn’t require an npm install

git submodule add

{ home.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/home.svg, about.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/question-mark-circle.svg, search.svg: https://raw.githubusercontent.com/tailwindlabs/heroicons/refs/heads/master/optimized/24/outline/magnifying-glass.svg }

As you can see, I name my icon (e.g. search

Beautiful, isn’t it? It kind of reminds me of import maps where you can map a bare module specifier to a URL (and Deno’s semi-abandoned HTTP imports which were beautiful in their own right).How It Works

Origami makes file paths first-class citizens of the language — even “remote” file paths — so it’s very simple to create a single file that maps your icon names in a codebase to someone else’s icon names from a set, whether those are being installed on disk via npm or fetched over the internet.To simplify my example earlier, I can have a file like icons.ori

{ home.svg: https://example.com/path/to/home.svg about.svg: https://example.com/path/to/information-circle.svg search.svg: https://example.com/path/to/magnifying-glass.svg }

Then I can reference those icons in my templates like this:${icons.ori/home.svg} Search

Easy-peasy! And when I want to change icons, I simply update the entries in icons.ori

And if you really want to go the extra mile, you can use Origami’s caching feature:Tree.cache( { home.svg: https://raw.github.com/path/to/home.svg about.svg: https://raw.github.com/path/to/information-circle.svg search.svg: https://raw.github.com/path/to/magnifying-glass.svg }, Origami.projectRoot()/cache )

Rather than just caching the files in memory, this will cache them to a local folder like this:cache/ home.svg about.svg search.svg