@noho-digital/remix-icons-svg

All ~3200 Remix Icons as importable SVG strings with framework wrapper components for Svelte, React, and Vue.

Install

npm install @noho-digital/remix-icons-svg

Usage

SVG Strings (framework-agnostic)

import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
// Each export is an SVG string: '<svg viewBox="0 0 24 24" ...>...</svg>'

Svelte

<script>
  import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
  import { Icon } from '@noho-digital/remix-icons-svg/svelte';
</script>

<Icon icon={RiHomeLine} size="md" alt="Home" />
<Icon icon={RiSearchFill} size="sm" />

React

import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
import { Icon } from '@noho-digital/remix-icons-svg/react';

function App() {
  return (
    <>
      <Icon icon={RiHomeLine} size="md" alt="Home" />
      <Icon icon={RiSearchFill} size="sm" />
    </>
  );
}

Vue / Nuxt

<script setup>
import { RiHomeLine, RiSearchFill } from '@noho-digital/remix-icons-svg';
import { Icon } from '@noho-digital/remix-icons-svg/vue';
</script>

<template>
  <Icon :icon="RiHomeLine" size="md" alt="Home" />
  <Icon :icon="RiSearchFill" size="sm" />
</template>

Direct SVG file import

import icon from '@noho-digital/remix-icons-svg/icons/RiHomeLine.svg';

Icon Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | icon | string | required | SVG string from this package | | size | 'xs' \| 'sm' \| 'md' \| 'lg' | 'sm' | Icon size | | alt | string | '' | Accessible label (sets role="img") | | class / className | string | '' | Additional CSS classes (React uses className) |

Sizes

| Size | Dimensions | |------|-----------| | xs | 12px (0.75rem) | | sm | 16px (1rem) | | md | 20px (1.25rem) | | lg | 24px (1.5rem) |

Icon Naming

Icons follow PascalCase with an Ri prefix:

• home-line.svg → RiHomeLine
• search-fill.svg → RiSearchFill

How It Works

The icon components use CSS mask-image to render SVGs. The icon inherits currentColor from its parent, making it easy to style with CSS or Tailwind (text-red-500, etc.).

License

Icons are from Remix Icon (Apache 2.0).