Easier way to manage locally-created project-specific icons?

[rassie]

Im my React projects, I'm starting to feel a need for custom project-specific icons. I would like them to follow the same syntax and feel as Tabler, so I need to convert whatever comes from the designer.

Currently, from an initial SVG, I had to do the following:

• Run rsvg-convert to scale the icon to 24x24
• Run svgo to optimize the paths and remove the transforms
• Create a component with export const IconCustom = createReactComponent('custom', 'IconCustom', [])
• Copy&paste the attributes (mostly d, fill and strokeWidth) from the SVG to the component

This is somewhat unfullfillling. I would very much like to adopt what Tabler does in the build step -- iterate over SVGs, validate, clean-up, sane-check, convert them to components, export components, but I can't reuse anything from build-icons.mjs, since it's not exposed and not really suited for external icons.

Ideally, I'd like to have something like this (I'm using Vite, but raw imports should work similarly elsewhere):

import customIcon from "./icons/custom.svg?raw";
import { createReactComponent, svgToIconData } from '@tabler/icons-react';

export const IconCustom = createReactComponent('custom', 'IconCustom', svgToIconData(customIcon));

with svgToIconData being whatever is happening in build-icons.mjs to produce children.

Is there a way this could happen? Is there a better way than what I've described?