https://github.com/pintoderian/react-svg-sprites
Extension to generate SVG sprites and provide an Icon component
https://github.com/pintoderian/react-svg-sprites
react reactjs svg svgsprite
Last synced: 10 months ago
JSON representation
Extension to generate SVG sprites and provide an Icon component
- Host: GitHub
- URL: https://github.com/pintoderian/react-svg-sprites
- Owner: pintoderian
- License: mit
- Created: 2024-10-18T04:13:08.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-05-30T04:27:30.000Z (about 1 year ago)
- Last Synced: 2025-06-16T05:08:21.622Z (12 months ago)
- Topics: react, reactjs, svg, svgsprite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-svg-sprites
- Size: 457 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
---
# 🧩 react-svg-sprites
A flexible SVG sprite generator and React icon component.
Supports raw folders, grouped components, flat or structured output, and even SVGO optimization.
## 📦 Installation
```bash
npm install react-svg-sprites
```
## ⚙️ Configuration (`sprites.config.ts`)
Create a `sprites.config.ts` file in the root of your project:
```ts
import path from 'path';
import { Apple } from 'lucide-react';
export default {
iconDirs: [
'src/assets/icons/bigdata',
'src/assets/icons/cms',
'src/assets/icons/database',
'src/assets/icons/digital-asset',
'src/assets/icons/flags',
'src/assets/icons/seo',
'src/assets/icons/system',
'src/assets/icons/teamwork',
'src/assets/icons/social',
'src/assets/icons/others',
],
iconComponents: {
lucide: [{ name: 'Apple', component: Apple }],
},
outputDir: path.resolve(__dirname, 'public/sprites'),
flatOutput: true,
optimize: true,
includeTitle: true,
};
```
### Available Options
| Option | Type | Description |
| ---------------- | ------------------------------------ | -------------------------------------------------------------------- |
| `iconDirs` | `string[]` | Folders with `.svg` files. |
| `iconComponents` | `Icon[]` or `Record` | Grouped or flat list of icon components. |
| `outputDir` | `string` | Directory where sprites will be generated. |
| `flatOutput` | `boolean` | If true, outputs all sprites in root without folders. |
| `spriteFileName` | `string` | Custom name for final file (only in flat mode). Default: `"sprite"`. |
| `optimize` | `boolean` | Uses [SVGO](https://github.com/svg/svgo) to optimize SVGs. |
| `includeTitle` | `boolean` | Adds `` tag to each symbol for accessibility. |
---
## 🚀 Sprite generation
```bash
npx react-svg-sprites
```
This command will:
- Parse all configured folders and components.
- Create one or more optimized sprite sheets in `outputDir`.
### Output example
```bash
pnpm generate:sprites
> codegea.com@0.2.0 generate:sprites C:\laragon\www\codegea.com
> npx react-svg-sprites
✔ ✅ Sprite created: C:\laragon\www\codegea.com\public\sprites\bigdata.svg
```
## 🧱 Usage in React
```tsx
import SpriteIcon from 'react-svg-sprites';
;
```
### Output
```html
```
---
## 🧾 Props (SpriteIcon)
| Prop | Type | Required | Description |
| ----------- | ------------------ | -------- | ---------------------------- |
| `file` | `string` | ✅ | Path to the sprite file. |
| `symbol` | `string` | ✅ | Symbol ID inside the sprite. |
| `width` | `number \| string` | ✅ | Width of the icon. |
| `height` | `number \| string` | ✅ | Height of the icon. |
| `className` | `string` | ❌ | Optional class for styling. |
---
## 🧑💻 Contributing
Feel free to open issues, suggest features or send pull requests.
---
### ☕ Like this project?
Support my work on [Ko-fi](https://ko-fi.com/dpinto) 💙