Looking for recommendations to integrate Modus Icons(1000+) in Modus Web Components

[msankaran0712]

We have experimented with various approaches in order to achieve the desired result. Some of these approaches include implementing icons as CSS classes, utilizing icons as CSS properties, and creating a wrapper web component that leverages sprite files from the Modus Icons npm package.

[mihkeleidast]

Since you have experimented with some of the approaches already, could you share the findings?

I would do mostly what Shoelace is doing, as I think it's a fairly well thought through approach:

• Prefer SVG over icon fonts because SVG renders better.
• The filled/outlined/transportation/whatever icon sets can be implemented as different libraries, which need to be registered for use separately.
• Have a <modus-icon> web component that renders icons from the specified library.
• How the icon libraries are loaded is up for the consumer - if they want to put everything in a single sprite, they can do that, or if they want to load single icons on-demand, that can also be configured. If a product has a custom icon set for whatever reason, they can register that as a custom library, etc.

[msankaran0712]

@mihkeleidast I still need to figure out how to get the path of the sprite svg file so the icon path can be referenced in <use>'s href.

Below is the wrapper component I created,

// eslint-disable-next-line
import { Component, h, Prop, Event, Element, EventEmitter } from '@stencil/core';
import solidIcons from '@trimble-oss/modus-icons/dist/modus-solid/sprites/modus-icons.svg';
import outlinedIcons from '@trimble-oss/modus-icons/dist/modus-outlined/sprites/modus-icons.svg';
import { MODUS_ICONS_OUTLINED, ModusIconType } from './modus-icon.models';

@Component({
  tag: 'modus-icon',
  styleUrl: 'modus-icon.scss',
  shadow: true,
})
export class ModusIcon {
  @Element() el: HTMLElement;

  /** (optional) The color of the Icon */
  @Prop() color?: string;

  /** The name of the icon */
  @Prop() name: string | null;

  /** (optional) The size of the Icon */
  @Prop() size?: string = '16';

  /** (optional) The size of the Icon */
  @Prop() type?: ModusIconType = 'solid';

  /** (optional) The click handler function */
  @Event() iconClick?: EventEmitter;

  onClick(event: MouseEvent): void {
    if (event.defaultPrevented) {
      return;
    }
    this.iconClick.emit(event);
  }

  render(): unknown {
    return (
      this.name && (
        <svg
          onClick={this.onClick}
          style={{ width: this.size, height: this.size, color: this.color }}
          fill={this.color ?? 'currentColor'}>
          <use href={`${this.type === MODUS_ICONS_OUTLINED ? outlinedIcons : solidIcons}#${this.name}`}></use>
        </svg>
      )
    );
  }
}