BKA Icons

Modern, flexible React icon library generated by BKADEMY. Built for design systems, powered by SVG and fully type-safe.

✨ Features

• SVG-Driven: Pure, optimized SVG for each icon with full currentColor support.
• Module Per Group: Import only what you need. Each icon group is a separate entrypoint.
• Auto-Generated: Completely generated React + TypeScript components from the contents of src/assets/.
• Typed & Consistent: TypeScript types for all icons, consistent export structure.
• Production-Ready: Seamless drop-in for React projects with @ant-design/icons compatibility.
• Accessible & Customizable: Supports all common props, ARIA-labels, and flexible styling.

🚀 Quick Start

1. Install

npm install @bkademy-dev/icons @ant-design/icons react
# or
yarn add @bkademy-dev/icons @ant-design/icons react

2. Importing Icons

Import icons by group. For example, to use an icon from the "Money" group:

import { WalletBlack, CardAddBlack } from '@bkademy-dev/icons/Money';

// Usage in your component:
<WalletBlack style={{ fontSize: 32, color: 'tomato' }} aria-label="Wallet" />
<CardAddBlack />

• Each group (like Money, Media, etc.) is a separate import entrypoint.
• No default export. Import icons by name as shown above.
• Icon props match those of @ant-design/icons.

3. Icon Groups Structure & Naming

• All SVGs live under src/assets/<group>/<style>/<icon>.svg
• Each group (folder) creates a separate entrypoint:
  import { ... } from '@bkademy-dev/icons/GroupName'
• Icon names are PascalCase + StyleSuffix, e.g.:
  • WalletBlack → src/assets/money/black/wallet.svg
  • CardAddBlack → src/assets/money/black/card-add.svg
• For a full list, browse the src/Money.ts, src/Media.ts, etc. files.

🛠️ Development

Add/Update Icons

1. Place your SVG(s) in src/assets/<group>/<style>/.

2. Run the generator to update components and entrypoints:

   npm run generate

   This will:

   • Optimize SVGs with SVGO,
   • Generate organized React components at src/components/,
   • Update group entrypoints: src/Money.ts, src/Media.ts, etc.

Build for Publish

npm run build

Builds and emits production dist/ output and type declarations.

🗂️ Publishing & Distribution

• Before publishing, ensure you run npm run build.
• The published package only includes compiled files in dist/, not raw sources.

🤝 Contributing

• Open an issue or pull request for new icons, bugfixes, or improvements.
• See src/assets/ for current folder & naming structure.

📚 Related

• @ant-design/icons
• SVGO
• Rollup.js

License

MIT © BKADEMY