@investtal/icons

Investtal Design System Icons - React, Vue, and SVG Sprite outputs.

Installation

bun add @investtal/icons

Usage

React Components

import { ChevronDown, Check, FormatBold } from '@investtal/icons/react'

function MyComponent() {
  return (
    <button>
      <ChevronDown className="size-4" />
      Click me
    </button>
  )
}

Vue Components

<script setup>
import { ChevronDown, Check } from '@investtal/icons/vue'
</script>

<template>
  <button>
    <ChevronDown class="size-4" />
    Click me
  </button>
</template>

SVG Sprite

// Import sprite once at app root
import '@investtal/icons/sprite'

// Use with SVG use element
function MyIcon({ name }: { name: string }) {
  return (
    <svg className="size-4">
      <use href={`#${name}`} />
    </svg>
  )
}

// Usage
<MyIcon name="chevron-down" />

Raw SVG Import

import chevronDown from '@investtal/icons/svg/chevron-down.svg'

Icon Collections

This package includes icons from multiple providers, but they are exported without prefixes for simplicity:

• Phosphor Icons (preferred) - e.g., Check, ArrowDown, User
• Radix Icons - e.g., ChevronDown, Cross1, Archive
• Material Design Icons - e.g., FormatBold, FormatAlignCenter
• Material Symbols - e.g., Undo, Redo

Icons are named using PascalCase without provider prefixes, making them easy to use without needing to remember which collection they come from.

Adding New Icons

1. Edit scripts/icons-list.ts to add new icons (format: "provider:icon-name")
2. Run bun run generate to regenerate all outputs

Development

# Install dependencies
bun install

# Generate icons
bun run generate

# Build package
bun run build