Offline Icon Support

[mpaxson]

Description
Support for a full offline icon library would be much appreciated (Like Material Design Icons or font awesome community)

Love your library but my use case is in an airgapped environment and the ICONES support won't work.

As such, I have to import many SVGs for each scene by hand and greatly decreases the template/example time.

Thanks!

[aarthificial]

You should be able to achieve this with a simple component.

1. Using a third-party library
   You can install something like @material-design-icons/svg in your project:

   npm i @material-design-icons/svg

   Then leverage glob imports to implement the component:

   const ICONS_PATH =
     '../../node_modules/@material-design-icons/svg/filled/';
   const ICONS = import.meta.glob<true, string, {default: string}>(
     `../../node_modules/@material-design-icons/svg/filled/*.svg`,
     {eager: true},
   );
   
   export function Icon({name, ...props}: ImgProps & {name: string}) {
     const module = ICONS[`${ICONS_PATH}${name}.svg`];
     return <Img src={module.default} {...props} />;
   }

   This will import the local urls of all icons and allow you to reference them by name without importing them individually:

   view.add(<Icon name={'face'} />);

   Note that ICONS_PATH is relative to the current file.

2. Using static assets.
   You can create a public directory in your project and copy all the icons you want to use over there.
   Vite will then resolve absolute paths to that directory:

   export function Icon({name, ...props}: ImgProps & {name: string}) {
     return <Img src={`/icons/${name}.svg`} {...props} />;
   }

   The above example assumes that you put your icons in the /public/icons/ directory.