Icon

Import

import { Icon } from '@dr-max/ui/icon'
import { iconTip } from '@dr-max/ui/icons'

Every SVG in the set is a named export prefixed with icon (tip.svg → iconTip, shop/cart.svg → iconShopCart). Because each icon is its own export, apps bundle only the icons they import. Black fill/stroke paints are rewritten to currentColor, so icons follow the surrounding text color.

Usage

The icon prop takes the imported IconDefinition object. Size and color come from CSS classes:

<script setup lang="ts">
import { Icon } from '@dr-max/ui/icon'
import { iconTip } from '@dr-max/ui/icons'
</script>

<template>
  <Icon :icon="iconTip" class="size-6 text-green-600" />
</template>

Dynamic lookup

For name-based lookup, @dr-max/ui/icons also exports iconNames and iconRegistry. Importing the registry opts out of tree-shaking and bundles every icon:

import { iconRegistry } from '@dr-max/ui/icons'
import type { IconName } from '@dr-max/ui/icons'

const icon = (name: IconName) => iconRegistry[name]

Playground

Browse the whole icon set live:

<script setup lang="ts">
import { Icon } from '@dr-max/ui/icon'
import { iconBasketShopping } from '@dr-max/ui/icons'
</script>

<template>
  <Icon :icon="iconBasketShopping" class="size-6" />
</template>