@wirechunk/icons (Material Symbols)

The latest optimized SVGs for Material Symbols.

Icons are automatically updated (monthly).

Wirechunk extensions can use this package for TypeScript declarations for all icons that are automatically made available at runtime.

Installation

npm i -D @wirechunk/icons

This package comes with a postinstall script that generates type declarations for all defined icon components. If you've installed it with scripts disabled, you can manually generate the type declarations by running node generate-declarations.js from within the package's directory.

Usage

Import components from "@wirechunk/icons/{WEIGHT}/{OPTICAL_SIZE}/{STYLE}/{ICON}.js" where:

• WEIGHT is 200, 400, or 600
• OPTICAL_SIZE is 20 or 48
• STYLE is outlined, rounded, or sharp
• ICON is the name of the icon, including the "-fill" suffix if you want the filled variant

For example:

import SvgCheck from '@wirechunk/icons/400/20/outlined/check.js';
import SvgError from '@wirechunk/icons/600/48/outlined/error.js';
import SvgStarFill from '@wirechunk/icons/400/48/outlined/star-fill.js';

const MyComponent = () => (
  <div>
    <SvgCheck />
    <SvgError />
    <SvgStarFill />
  </div>
);

In general, you want to use the 20 optical size (representing 20dp) for icons that are rendered at 34px or smaller and the 48 optical size (representing 48dp) for icons that are rendered at 35px or larger. You can set width and height props on these icons regardless of the optical size.

Wirechunk's bundler is configured to automatically treat any import from a "@wirechunk/icons/" path as external, so you won't see your imported SVG components in your bundled extension code.