@rometheme/rtmicon-react

A single generic <RtmIcon /> React component for the RTMIcon icon library — 1,025 icons across two sets (regular and thin), rendered as inline SVG. Written in TypeScript, ships its own type declarations.

Install

npm install @rometheme/rtmicon-react

@rometheme/rtmicon-data is installed automatically as a dependency. react (>=17) is a peer dependency — make sure it's already in your project.

Usage

import { RtmIcon } from '@rometheme/rtmicon-react';

function Example() {
  return (
    <>
      <RtmIcon name="accordion" />
      <RtmIcon name="alert" set="thin" size={32} color="#e63946" />
    </>
  );
}

Props

| Prop | Type | Default | Description | | ----------- | ---------------------- | ---------------- | ------------------------------------------------------------------------ | | name | string | — | Icon name (kebab-case), e.g. "accordion", "alarm-clock". | | set | 'regular' \| 'thin' | 'regular' | Which icon set to look up name in. | | size | number \| string | 24 | Width and height of the SVG. | | color | string | 'currentColor' | Fill color. | | title | string | — | Accessible title. When omitted, the icon is marked aria-hidden (decorative). | | d | string | — | Raw path data — bypasses the name/set lookup entirely. | | viewBox | string | — | Custom viewBox, used together with d. | | transform | string | — | Custom transform, used together with d. |

Any other prop (className, onClick, style, etc.) is passed straight through to the underlying <svg> element.

Smallest possible bundle

<RtmIcon name="..." /> includes the full name→path lookup table for the chosen set so it can resolve icons by string at runtime. If you only use a handful of icons and want the absolute smallest bundle, import the path data directly and pass it via d + viewBox instead of name:

import { RtmIcon } from '@rometheme/rtmicon-react';
import { accordion, REGULAR_VIEWBOX } from '@rometheme/rtmicon-data';

<RtmIcon d={accordion} viewBox={REGULAR_VIEWBOX} />;

This lets bundlers tree-shake away every icon path you don't explicitly import.

TypeScript

Full type definitions are included — RtmIconProps extends React.SVGProps<SVGSVGElement>, so all standard SVG attributes autocomplete alongside the custom props above.

License

MIT