{"id":21733959,"url":"https://github.com/pintoderian/react-svg-sprites","last_synced_at":"2025-08-02T16:41:38.113Z","repository":{"id":258468141,"uuid":"874566166","full_name":"pintoderian/react-svg-sprites","owner":"pintoderian","description":"Extension to generate SVG sprites and provide an Icon component","archived":false,"fork":false,"pushed_at":"2025-05-30T04:27:30.000Z","size":468,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-16T05:08:21.622Z","etag":null,"topics":["react","reactjs","svg","svgsprite"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-svg-sprites","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pintoderian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-18T04:13:08.000Z","updated_at":"2025-05-30T23:17:19.000Z","dependencies_parsed_at":"2025-06-16T05:07:19.748Z","dependency_job_id":"a992ea18-45ba-4074-8b2e-5f1f76d4a538","html_url":"https://github.com/pintoderian/react-svg-sprites","commit_stats":null,"previous_names":["pintoderian/react-svg-sprites"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pintoderian/react-svg-sprites","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintoderian%2Freact-svg-sprites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintoderian%2Freact-svg-sprites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintoderian%2Freact-svg-sprites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintoderian%2Freact-svg-sprites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pintoderian","download_url":"https://codeload.github.com/pintoderian/react-svg-sprites/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintoderian%2Freact-svg-sprites/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265811124,"owners_count":23831969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactjs","svg","svgsprite"],"created_at":"2024-11-26T05:07:11.249Z","updated_at":"2025-07-23T10:32:49.981Z","avatar_url":"https://github.com/pintoderian.png","language":"TypeScript","funding_links":["https://ko-fi.com/dpinto"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-svg-sprites\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-svg-sprites?style=for-the-badge\u0026color=0869B8\" alt=\"NPM version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://x.com/dpintoec\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white\u0026labelColor=007BCE\" alt=\"Twitter\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n# 🧩 react-svg-sprites\n\nA flexible SVG sprite generator and React icon component.  \nSupports raw folders, grouped components, flat or structured output, and even SVGO optimization.\n\n## 📦 Installation\n\n```bash\nnpm install react-svg-sprites\n```\n\n## ⚙️ Configuration (`sprites.config.ts`)\n\nCreate a `sprites.config.ts` file in the root of your project:\n\n```ts\nimport path from 'path';\nimport { Apple } from 'lucide-react';\n\nexport default {\n  iconDirs: [\n    'src/assets/icons/bigdata',\n    'src/assets/icons/cms',\n    'src/assets/icons/database',\n    'src/assets/icons/digital-asset',\n    'src/assets/icons/flags',\n    'src/assets/icons/seo',\n    'src/assets/icons/system',\n    'src/assets/icons/teamwork',\n    'src/assets/icons/social',\n    'src/assets/icons/others',\n  ],\n  iconComponents: {\n    lucide: [{ name: 'Apple', component: Apple }],\n  },\n  outputDir: path.resolve(__dirname, 'public/sprites'),\n  flatOutput: true,\n  optimize: true,\n  includeTitle: true,\n};\n```\n\n### Available Options\n\n| Option           | Type                                 | Description                                                          |\n| ---------------- | ------------------------------------ | -------------------------------------------------------------------- |\n| `iconDirs`       | `string[]`                           | Folders with `.svg` files.                                           |\n| `iconComponents` | `Icon[]` or `Record\u003cstring, Icon[]\u003e` | Grouped or flat list of icon components.                             |\n| `outputDir`      | `string`                             | Directory where sprites will be generated.                           |\n| `flatOutput`     | `boolean`                            | If true, outputs all sprites in root without folders.                |\n| `spriteFileName` | `string`                             | Custom name for final file (only in flat mode). Default: `\"sprite\"`. |\n| `optimize`       | `boolean`                            | Uses [SVGO](https://github.com/svg/svgo) to optimize SVGs.           |\n| `includeTitle`   | `boolean`                            | Adds `\u003ctitle\u003e` tag to each symbol for accessibility.                 |\n\n---\n\n## 🚀 Sprite generation\n\n```bash\nnpx react-svg-sprites\n```\n\nThis command will:\n\n- Parse all configured folders and components.\n- Create one or more optimized sprite sheets in `outputDir`.\n\n### Output example\n\n```bash\npnpm generate:sprites\n\n\u003e codegea.com@0.2.0 generate:sprites C:\\laragon\\www\\codegea.com\n\u003e npx react-svg-sprites\n\n✔ ✅ Sprite created: C:\\laragon\\www\\codegea.com\\public\\sprites\\bigdata.svg\n```\n\n## 🧱 Usage in React\n\n```tsx\nimport SpriteIcon from 'react-svg-sprites';\n\n\u003cSpriteIcon\n  className=\"text-primary\"\n  file=\"/sprites/bigdata.svg\"\n  symbol=\"ArrowLeft\"\n  width={24}\n  height={24}\n/\u003e;\n```\n\n### Output\n\n```html\n\u003csvg class=\"text-primary\" width=\"24\" height=\"24\" aria-hidden=\"true\"\u003e\n  \u003cuse href=\"/sprites/ui/ui.svg#ArrowLeft\" /\u003e\n\u003c/svg\u003e\n```\n\n---\n\n## 🧾 Props (SpriteIcon)\n\n| Prop        | Type               | Required | Description                  |\n| ----------- | ------------------ | -------- | ---------------------------- |\n| `file`      | `string`           | ✅       | Path to the sprite file.     |\n| `symbol`    | `string`           | ✅       | Symbol ID inside the sprite. |\n| `width`     | `number \\| string` | ✅       | Width of the icon.           |\n| `height`    | `number \\| string` | ✅       | Height of the icon.          |\n| `className` | `string`           | ❌       | Optional class for styling.  |\n\n---\n\n## 🧑‍💻 Contributing\n\nFeel free to open issues, suggest features or send pull requests.\n\n---\n\n### ☕ Like this project?\n\nSupport my work on [Ko-fi](https://ko-fi.com/dpinto) 💙\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpintoderian%2Freact-svg-sprites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpintoderian%2Freact-svg-sprites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpintoderian%2Freact-svg-sprites/lists"}