@rometheme/rtmicon-vue

A single generic <RtmIcon /> Vue 3 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-vue

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

Usage

<script setup>
import { RtmIcon } from '@rometheme/rtmicon-vue';
</script>

<template>
  <RtmIcon name="accordion" />
  <RtmIcon name="alert" set="thin" :size="32" color="#e63946" />
</template>

Or globally:

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

const app = createApp(App);
app.component('RtmIcon', RtmIcon);

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 attribute not listed above (class, style, @click, etc.) falls through to the underlying <svg> element via $attrs.

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:

<script setup>
import { RtmIcon } from '@rometheme/rtmicon-vue';
import { accordion, REGULAR_VIEWBOX } from '@rometheme/rtmicon-data';
</script>

<template>
  <RtmIcon :d="accordion" :view-box="REGULAR_VIEWBOX" />
</template>

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

TypeScript

Full type definitions are included, inferred automatically from the component's defineComponent prop declarations.

License

MIT