{"_id":"@blockshark/crypto-icons","name":"@blockshark/crypto-icons","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@blockshark/crypto-icons","version":"0.2.0","description":"350+ cryptocurrency SVG icons and React components — 50 coins in 7 style variants","license":"MIT","type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./white":{"import":{"types":"./dist/white.d.ts","default":"./dist/white.js"},"require":{"types":"./dist/white.d.cts","default":"./dist/white.cjs"}},"./black":{"import":{"types":"./dist/black.d.ts","default":"./dist/black.js"},"require":{"types":"./dist/black.d.cts","default":"./dist/black.cjs"}},"./branded":{"import":{"types":"./dist/branded.d.ts","default":"./dist/branded.js"},"require":{"types":"./dist/branded.d.cts","default":"./dist/branded.cjs"}},"./inverted":{"import":{"types":"./dist/inverted.d.ts","default":"./dist/inverted.js"},"require":{"types":"./dist/inverted.d.cts","default":"./dist/inverted.cjs"}},"./glass":{"import":{"types":"./dist/glass.d.ts","default":"./dist/glass.js"},"require":{"types":"./dist/glass.d.cts","default":"./dist/glass.cjs"}},"./gray":{"import":{"types":"./dist/gray.d.ts","default":"./dist/gray.js"},"require":{"types":"./dist/gray.d.cts","default":"./dist/gray.cjs"}},"./all":{"import":{"types":"./dist/all.d.ts","default":"./dist/all.js"},"require":{"types":"./dist/all.d.cts","default":"./dist/all.cjs"}},"./meta":{"import":{"types":"./dist/meta.d.ts","default":"./dist/meta.js"},"require":{"types":"./dist/meta.d.cts","default":"./dist/meta.cjs"}},"./react":{"import":{"types":"./dist/react/index.d.ts","default":"./dist/react/index.js"},"require":{"types":"./dist/react/index.d.cts","default":"./dist/react/index.cjs"}},"./react/white":{"import":{"types":"./dist/react/white.d.ts","default":"./dist/react/white.js"},"require":{"types":"./dist/react/white.d.cts","default":"./dist/react/white.cjs"}},"./react/black":{"import":{"types":"./dist/react/black.d.ts","default":"./dist/react/black.js"},"require":{"types":"./dist/react/black.d.cts","default":"./dist/react/black.cjs"}},"./react/branded":{"import":{"types":"./dist/react/branded.d.ts","default":"./dist/react/branded.js"},"require":{"types":"./dist/react/branded.d.cts","default":"./dist/react/branded.cjs"}},"./react/inverted":{"import":{"types":"./dist/react/inverted.d.ts","default":"./dist/react/inverted.js"},"require":{"types":"./dist/react/inverted.d.cts","default":"./dist/react/inverted.cjs"}},"./react/glass":{"import":{"types":"./dist/react/glass.d.ts","default":"./dist/react/glass.js"},"require":{"types":"./dist/react/glass.d.cts","default":"./dist/react/glass.cjs"}},"./react/gray":{"import":{"types":"./dist/react/gray.d.ts","default":"./dist/react/gray.js"},"require":{"types":"./dist/react/gray.d.cts","default":"./dist/react/gray.cjs"}},"./svg/*":"./svg/*"},"scripts":{"generate":"tsx scripts/build-icons.ts","generate:variants":"tsx scripts/generate-variants.ts","validate":"tsx scripts/validate-svgs.ts","build":"npm run generate && tsup","test":"vitest run","prepublishOnly":"npm run build"},"keywords":["react","react-icons","crypto","crypto-icons","cryptocurrency","icons","svg","web3","defi","token-icons","coin-icons","bitcoin","ethereum","solana","blockchain","tree-shakeable","blockshark"],"peerDependencies":{"react":">=18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"devDependencies":{"@testing-library/react":"^16.3.0","@types/react":"^19.1.0","jsdom":"^26.1.0","react":"^19.1.0","rimraf":"^6.1.2","svgo":"^4.0.0","tsup":"^8.5.1","tsx":"^4.21.0","typescript":"^5.9.3","vitest":"^4.0.18"},"repository":{"type":"git","url":"git+https://github.com/blocksharkcom/crypto-icons.git"},"_id":"@blockshark/crypto-icons@0.2.0","gitHead":"cafdcb8e9ad5ca528002bd11633e27ae62f43bc0","bugs":{"url":"https://github.com/blocksharkcom/crypto-icons/issues"},"homepage":"https://github.com/blocksharkcom/crypto-icons#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-B/f8Vy5HkNW1pPiB44sIm7ioN3ro5rlyaYSHRrWJYyLpcA6gPnmR/FB6dL+GLJ2qERPp2gKmnSKU8UeNJHxaug==","shasum":"cc05777ba8da697ab985b3fcb11d2557c7ff1756","tarball":"https://registry.npmjs.org/@blockshark/crypto-icons/-/crypto-icons-0.2.0.tgz","fileCount":430,"unpackedSize":2234624,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBx+MMNzM7U8ZI9/z3T2oFrOagwOjUBUaBTUxaFoOslEAiASJpQFld2jppOQ5E+CcFgRpsAqXrSKEV8g5PGPIlFxfg=="}]},"_npmUser":{"name":"blocksharkcom","email":"info@blockshark.com"},"directories":{},"maintainers":[{"name":"blocksharkcom","email":"info@blockshark.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/crypto-icons_0.2.0_1771166703959_0.27585331200216756"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-15T14:45:03.889Z","0.2.0":"2026-02-15T14:45:04.195Z","modified":"2026-02-15T14:45:04.410Z"},"maintainers":[{"name":"blocksharkcom","email":"info@blockshark.com"}],"description":"350+ cryptocurrency SVG icons and React components — 50 coins in 7 style variants","homepage":"https://github.com/blocksharkcom/crypto-icons#readme","keywords":["react","react-icons","crypto","crypto-icons","cryptocurrency","icons","svg","web3","defi","token-icons","coin-icons","bitcoin","ethereum","solana","blockchain","tree-shakeable","blockshark"],"repository":{"type":"git","url":"git+https://github.com/blocksharkcom/crypto-icons.git"},"bugs":{"url":"https://github.com/blocksharkcom/crypto-icons/issues"},"license":"MIT","readme":"# @blockshark/crypto-icons\n\n350+ cryptocurrency SVG icons and React components — 50 coins in 7 style variants.\n\nFully typed. Tree-shakeable. Zero dependencies.\n\n## Features\n\n- **50 cryptocurrencies** covering the top coins by market cap\n- **7 style variants** — color, white, black, branded, inverted, glass, gray\n- **React components** with `forwardRef`, `displayName`, and full `SVGProps` support\n- **Raw SVG strings** for non-React projects (Vue, Svelte, vanilla JS, server-side)\n- **Raw `.svg` files** available via direct path imports\n- **Metadata API** with names, slugs, symbols, keywords, and brand colors\n- **TypeScript-first** — every export is fully typed\n- **Tree-shakeable** — `sideEffects: false`, only ships the icons you use\n- **ESM + CJS** — works everywhere\n\n## Installation\n\n```bash\nnpm install @blockshark/crypto-icons\n```\n\n```bash\nyarn add @blockshark/crypto-icons\n```\n\n```bash\npnpm add @blockshark/crypto-icons\n```\n\n> React is an optional peer dependency. The raw SVG string and metadata exports work without React.\n\n---\n\n## Quick start\n\n### React components\n\n```tsx\nimport { BitcoinIcon, EthereumIcon } from '@blockshark/crypto-icons/react';\n\nfunction App() {\n  return (\n    <div>\n      <BitcoinIcon width={32} height={32} />\n      <EthereumIcon width={32} height={32} className=\"eth\" />\n    </div>\n  );\n}\n```\n\n### Raw SVG strings\n\n```ts\nimport { Bitcoin, Ethereum } from '@blockshark/crypto-icons';\n\ndocument.getElementById('icon')!.innerHTML = Bitcoin;\n```\n\n---\n\n## React components\n\nImport from `@blockshark/crypto-icons/react` for the default **color** variant, or from a variant-specific subpath.\n\n```tsx\n// Color (default)\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react';\n\n// Other variants\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react/white';\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react/black';\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react/branded';\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react/inverted';\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react/glass';\nimport { BitcoinIcon } from '@blockshark/crypto-icons/react/gray';\n```\n\nEvery component is a `forwardRef` component that accepts all standard `SVGProps<SVGSVGElement>`:\n\n```tsx\n<BitcoinIcon\n  width={24}\n  height={24}\n  className=\"coin-icon\"\n  style={{ opacity: 0.8 }}\n  aria-label=\"Bitcoin\"\n/>\n```\n\n### Refs\n\n```tsx\nimport { useRef } from 'react';\nimport { SolanaIcon } from '@blockshark/crypto-icons/react';\n\nfunction App() {\n  const ref = useRef<SVGSVGElement>(null);\n  return <SolanaIcon ref={ref} width={48} />;\n}\n```\n\n### Naming convention\n\nComponents follow the `{Name}Icon` pattern:\n\n| Coin | Component |\n| --- | --- |\n| Bitcoin | `BitcoinIcon` |\n| Ethereum | `EthereumIcon` |\n| Bitcoin Cash | `BitcoinCashIcon` |\n| Shiba Inu | `ShibaInuIcon` |\n| Ethereum Classic | `EthereumClassicIcon` |\n| The Graph | `TheGraphIcon` |\n| THORChain | `THORChainIcon` |\n\n---\n\n## Raw SVG strings\n\nFor non-React projects, or when you need the raw SVG markup. Import from the root for the default **color** variant, or from a variant-specific subpath.\n\n```ts\n// Color (default)\nimport { Bitcoin, Ethereum } from '@blockshark/crypto-icons';\n\n// Other variants\nimport { Bitcoin } from '@blockshark/crypto-icons/white';\nimport { Bitcoin } from '@blockshark/crypto-icons/black';\nimport { Bitcoin } from '@blockshark/crypto-icons/branded';\nimport { Bitcoin } from '@blockshark/crypto-icons/inverted';\nimport { Bitcoin } from '@blockshark/crypto-icons/glass';\nimport { Bitcoin } from '@blockshark/crypto-icons/gray';\n\n// All variants at once (suffixed names)\nimport { BitcoinColor, BitcoinWhite, BitcoinGlass } from '@blockshark/crypto-icons/all';\n```\n\n### Usage with frameworks\n\n**Vue:**\n\n```vue\n<template>\n  <span v-html=\"Bitcoin\" />\n</template>\n\n<script setup>\nimport { Bitcoin } from '@blockshark/crypto-icons';\n</script>\n```\n\n**Svelte:**\n\n```svelte\n<script>\n  import { Bitcoin } from '@blockshark/crypto-icons';\n</script>\n\n{@html Bitcoin}\n```\n\n**Vanilla JS:**\n\n```js\nimport { Bitcoin } from '@blockshark/crypto-icons';\n\ndocument.getElementById('icon').innerHTML = Bitcoin;\n```\n\n---\n\n## Raw SVG files\n\nEvery icon is also available as an optimized `.svg` file for use in `<img>` tags, CSS, or any other context.\n\n```\n@blockshark/crypto-icons/svg/color/bitcoin.svg\n@blockshark/crypto-icons/svg/white/bitcoin.svg\n@blockshark/crypto-icons/svg/glass/ethereum.svg\n...\n```\n\n```html\n<img src=\"node_modules/@blockshark/crypto-icons/svg/color/bitcoin.svg\" alt=\"Bitcoin\" width=\"32\" />\n```\n\nWith a bundler that supports asset imports:\n\n```js\nimport bitcoinSvg from '@blockshark/crypto-icons/svg/color/bitcoin.svg';\n```\n\n---\n\n## Metadata\n\nThe metadata export provides structured information about every icon — useful for building search, filters, or dynamic icon pickers.\n\n```ts\nimport { icons, iconNames } from '@blockshark/crypto-icons/meta';\nimport type { IconName, IconSlug, IconVariant } from '@blockshark/crypto-icons/meta';\n\n// icons: IconMeta[]\nicons.forEach((icon) => {\n  console.log(icon.name);       // 'Bitcoin'\n  console.log(icon.slug);       // 'bitcoin'\n  console.log(icon.symbol);     // 'BTC'\n  console.log(icon.keywords);   // ['bitcoin', 'btc', 'crypto']\n  console.log(icon.brandColor); // '#F7931A'\n});\n\n// iconNames: readonly string[]\n// ['Bitcoin', 'Ethereum', 'Tether', ...]\n```\n\n### Dynamic icon lookup\n\n```tsx\nimport { icons } from '@blockshark/crypto-icons/meta';\nimport * as reactIcons from '@blockshark/crypto-icons/react';\n\nfunction CoinIcon({ symbol, size }: { symbol: string; size: number }) {\n  const meta = icons.find((i) => i.symbol === symbol);\n  if (!meta) return null;\n\n  const Component = (reactIcons as any)[`${meta.name}Icon`];\n  return <Component width={size} height={size} />;\n}\n\n// <CoinIcon symbol=\"BTC\" size={24} />\n// <CoinIcon symbol=\"ETH\" size={24} />\n```\n\n---\n\n## Style variants\n\nEvery coin is available in 7 hand-crafted variants:\n\n| Variant | Description | Best for |\n| --- | --- | --- |\n| **color** | Full-color icons with background circles | General use, dashboards |\n| **white** | White monochrome | Dark backgrounds |\n| **black** | Black monochrome | Light backgrounds, print |\n| **branded** | Logo-only, no background circle | Inline with text, compact layouts |\n| **inverted** | White background circle with colored logo | Light-themed cards |\n| **glass** | Translucent background with soft opacity | Glassmorphism UI, overlays |\n| **gray** | Neutral gray monochrome (#6B7280) | Disabled states, muted UI |\n\n---\n\n## Supported coins\n\n50 cryptocurrencies sorted by approximate market cap:\n\n| # | Coin | Symbol | Export name | Slug |\n| --- | --- | --- | --- | --- |\n| 1 | Bitcoin | BTC | `Bitcoin` / `BitcoinIcon` | `bitcoin` |\n| 2 | Ethereum | ETH | `Ethereum` / `EthereumIcon` | `ethereum` |\n| 3 | Tether | USDT | `Tether` / `TetherIcon` | `tether` |\n| 4 | BNB | BNB | `BNB` / `BNBIcon` | `bnb` |\n| 5 | Solana | SOL | `Solana` / `SolanaIcon` | `solana` |\n| 6 | XRP | XRP | `XRP` / `XRPIcon` | `xrp` |\n| 7 | USDC | USDC | `USDC` / `USDCIcon` | `usdc` |\n| 8 | Cardano | ADA | `Cardano` / `CardanoIcon` | `cardano` |\n| 9 | Dogecoin | DOGE | `Dogecoin` / `DogecoinIcon` | `dogecoin` |\n| 10 | TRON | TRX | `TRON` / `TRONIcon` | `tron` |\n| 11 | Avalanche | AVAX | `Avalanche` / `AvalancheIcon` | `avalanche` |\n| 12 | Chainlink | LINK | `Chainlink` / `ChainlinkIcon` | `chainlink` |\n| 13 | Polkadot | DOT | `Polkadot` / `PolkadotIcon` | `polkadot` |\n| 14 | Polygon | POL | `Polygon` / `PolygonIcon` | `polygon` |\n| 15 | Toncoin | TON | `Toncoin` / `ToncoinIcon` | `toncoin` |\n| 16 | Shiba Inu | SHIB | `ShibaInu` / `ShibaInuIcon` | `shiba-inu` |\n| 17 | Litecoin | LTC | `Litecoin` / `LitecoinIcon` | `litecoin` |\n| 18 | Uniswap | UNI | `Uniswap` / `UniswapIcon` | `uniswap` |\n| 19 | Near | NEAR | `Near` / `NearIcon` | `near` |\n| 20 | Stellar | XLM | `Stellar` / `StellarIcon` | `stellar` |\n| 21 | Bitcoin Cash | BCH | `BitcoinCash` / `BitcoinCashIcon` | `bitcoin-cash` |\n| 22 | Dai | DAI | `Dai` / `DaiIcon` | `dai` |\n| 23 | LEO | LEO | `LEO` / `LEOIcon` | `leo` |\n| 24 | Cosmos | ATOM | `Cosmos` / `CosmosIcon` | `cosmos` |\n| 25 | Monero | XMR | `Monero` / `MoneroIcon` | `monero` |\n| 26 | Ethereum Classic | ETC | `EthereumClassic` / `EthereumClassicIcon` | `ethereum-classic` |\n| 27 | Hedera | HBAR | `Hedera` / `HederaIcon` | `hedera` |\n| 28 | Filecoin | FIL | `Filecoin` / `FilecoinIcon` | `filecoin` |\n| 29 | Aptos | APT | `Aptos` / `AptosIcon` | `aptos` |\n| 30 | Mantle | MNT | `Mantle` / `MantleIcon` | `mantle` |\n| 31 | Cronos | CRO | `Cronos` / `CronosIcon` | `cronos` |\n| 32 | VeChain | VET | `VeChain` / `VeChainIcon` | `vechain` |\n| 33 | Render | RNDR | `Render` / `RenderIcon` | `render` |\n| 34 | Kaspa | KAS | `Kaspa` / `KaspaIcon` | `kaspa` |\n| 35 | Arbitrum | ARB | `Arbitrum` / `ArbitrumIcon` | `arbitrum` |\n| 36 | Optimism | OP | `Optimism` / `OptimismIcon` | `optimism` |\n| 37 | Immutable | IMX | `Immutable` / `ImmutableIcon` | `immutable` |\n| 38 | Sui | SUI | `Sui` / `SuiIcon` | `sui` |\n| 39 | Injective | INJ | `Injective` / `InjectiveIcon` | `injective` |\n| 40 | Aave | AAVE | `Aave` / `AaveIcon` | `aave` |\n| 41 | Algorand | ALGO | `Algorand` / `AlgorandIcon` | `algorand` |\n| 42 | The Graph | GRT | `TheGraph` / `TheGraphIcon` | `the-graph` |\n| 43 | Fantom | FTM | `Fantom` / `FantomIcon` | `fantom` |\n| 44 | Stacks | STX | `Stacks` / `StacksIcon` | `stacks` |\n| 45 | Celestia | TIA | `Celestia` / `CelestiaIcon` | `celestia` |\n| 46 | Sei | SEI | `Sei` / `SeiIcon` | `sei` |\n| 47 | THORChain | RUNE | `THORChain` / `THORChainIcon` | `thorchain` |\n| 48 | Flow | FLOW | `Flow` / `FlowIcon` | `flow` |\n| 49 | Axie Infinity | AXS | `Axie` / `AxieIcon` | `axie` |\n| 50 | Maker | MKR | `Maker` / `MakerIcon` | `maker` |\n\n---\n\n## API reference\n\n### Subpath exports\n\n| Import path | Contents |\n| --- | --- |\n| `@blockshark/crypto-icons` | Raw SVG strings (color) |\n| `@blockshark/crypto-icons/white` | Raw SVG strings (white) |\n| `@blockshark/crypto-icons/black` | Raw SVG strings (black) |\n| `@blockshark/crypto-icons/branded` | Raw SVG strings (branded) |\n| `@blockshark/crypto-icons/inverted` | Raw SVG strings (inverted) |\n| `@blockshark/crypto-icons/glass` | Raw SVG strings (glass) |\n| `@blockshark/crypto-icons/gray` | Raw SVG strings (gray) |\n| `@blockshark/crypto-icons/all` | Raw SVG strings (all variants, suffixed names) |\n| `@blockshark/crypto-icons/react` | React components (color) |\n| `@blockshark/crypto-icons/react/white` | React components (white) |\n| `@blockshark/crypto-icons/react/black` | React components (black) |\n| `@blockshark/crypto-icons/react/branded` | React components (branded) |\n| `@blockshark/crypto-icons/react/inverted` | React components (inverted) |\n| `@blockshark/crypto-icons/react/glass` | React components (glass) |\n| `@blockshark/crypto-icons/react/gray` | React components (gray) |\n| `@blockshark/crypto-icons/meta` | Metadata (icons, iconNames, types) |\n| `@blockshark/crypto-icons/svg/*` | Raw `.svg` files |\n\n### TypeScript types\n\n```ts\nimport type { IconName, IconSlug, IconVariant } from '@blockshark/crypto-icons/meta';\n\ntype IconName = 'Bitcoin' | 'Ethereum' | 'Tether' | /* ... */ 'Maker';\ntype IconSlug = 'bitcoin' | 'ethereum' | 'tether' | /* ... */ 'maker';\ntype IconVariant = 'color' | 'white' | 'black' | 'branded' | 'inverted' | 'glass' | 'gray';\n```\n\n### React component props\n\nEvery React icon component accepts `SVGProps<SVGSVGElement>` and forwards refs:\n\n```ts\ninterface IconProps extends React.SVGProps<SVGSVGElement> {\n  // All standard SVG attributes: width, height, className, style, fill, stroke, etc.\n  // Plus all event handlers: onClick, onMouseEnter, etc.\n  // Plus ref via forwardRef\n}\n```\n\n---\n\n## Tree-shaking\n\nThe package is marked `sideEffects: false` and ships ESM. Your bundler will only include the icons you actually import:\n\n```tsx\n// Only BitcoinIcon and EthereumIcon end up in your bundle\nimport { BitcoinIcon, EthereumIcon } from '@blockshark/crypto-icons/react';\n```\n\n---\n\n## Requirements\n\n- **Raw SVG strings / metadata:** No dependencies. Works with any JavaScript runtime.\n- **React components:** React 18+\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-e079eb510a0651b429df33f8b47a37d1"}