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?

[Toddish]

If anyone else finds this post and wants to do something similar, you can add custom icons like this:

import { createReactComponent } from '@tabler/icons-react';
import { parseSync } from 'svgson';
import IconRaw from './icon.svg?raw';

const icon = parseSync(IconRaw);

const children = icon.children.map(({ name, attributes }, i) => {
  attributes.key = `svg-${i}`;

  attributes.strokeWidth = attributes['stroke-width'];
  delete attributes['stroke-width'];

  return [name, attributes];
});

const Icon = createReactComponent('outline', 'icon', 'icon', children);

export default Icon;

Obviously there's some abstraction you can do if you want to do multiple icons.