Tinfoil Icons

Custom icon library for Tinfoil projects, compatible with react-icons.

Installation

npm install @tinfoilsh/tinfoil-icons

Usage

Import icons the same way you would with react-icons:

import { TfBrain, TfTin, TfKey } from '@tinfoilsh/tinfoil-icons';

function App() {
  return (
    <div>
      <TfBrain size={24} color="#005050" />
      <TfTin size="2em" className="text-teal" />
      <TfKey size={32} />
    </div>
  );
}

Props

All icons accept the same props as react-icons:

• size?: string | number - Icon size (default: '1em')
• color?: string - Icon color (default: 'currentColor')
• className?: string - CSS class name
• style?: CSSProperties - Inline styles
• All other SVG attributes

Available Icons

• TfBrain
• TfCert
• TfCloud
• TfCpuCheck
• TfDatabase
• TfGithub
• TfGpuFan
• TfGpuNoFan
• TfGpu
• TfKey
• TfLock
• TfMonitor
• TfRobot
• TfServer
• TfShieldCheck
• TfShieldX
• TfSigstore
• TfStars
• TfTerminal
• TfTinSad
• TfTin
• TfUnlock
• TfWarning

Development

Adding or Updating Icons

1. Add or update SVG files in the svg/ directory
2. Regenerate components from SVGs:

   npm run sync     # Regenerates .tsx files from .svg files
   npm run build    # Build the package

The pre-commit hook automatically syncs (regenerates .tsx from .svg) and rebuilds before every commit.

Publishing

Publishing is automated via GitHub Actions with npm trusted publishing:

npm version patch  # or minor/major
git push origin main --tags

The workflow will automatically publish to npm when the version tag is pushed.

Icon Generation

When you modify SVG files in svg/, run:

npm run sync

This regenerates all .tsx icon components from the SVG source files.