Icon Grid

Show a named SVG icon set with version labels and a construction-grid overlay.

import { icons } from "../assets/icons";

<IconGrid icons={icons} unit={24} cols={4} version="v1.0" />

Usage

Supply an array of named SVG source strings. This inline example is complete; for larger sets, export the array from your own asset module as in the preview.

<IconGrid
  icons={[
    {
      name: "circle",
      svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="8" /></svg>',
    },
  ]}
/>

The preview’s import assumes a page at the content root. Adjust the path for nested or localized content. The component does not discover SVG files.

Examples

Select and order icons

Pass icon names to only in display order. This example takes the first two supplied icons and reverses them, uses two columns, and sets the version label to v2.0. The construction overlay remains a 24-unit grid to match the supplied SVG view boxes.

import { icons } from "../assets/icons";

<IconGrid
  icons={icons}
  only={icons
    .slice(0, 2)
    .map(({ name }) => name)
    .reverse()}
  cols={2}
  version="v2.0"
/>

Selection and construction grid

Without only, icons sort alphabetically by name. An unknown selected name throws an error; an empty selection renders no tiles. The first displayed tile gets the construction grid; unit changes the overlay divisions, not the SVG’s view box.

Below 48rem, the layout uses two columns regardless of cols. SVG strings render as HTML, so supply trusted project assets.

API reference