{"id":25013794,"url":"https://github.com/forge-42/vite-plugin-icons-spritesheet","last_synced_at":"2025-04-05T08:04:32.154Z","repository":{"id":237298702,"uuid":"792828356","full_name":"forge-42/vite-plugin-icons-spritesheet","owner":"forge-42","description":"Vite plugin that listens to an icon folder and outputs a spritesheet with optional types to specified location","archived":false,"fork":false,"pushed_at":"2025-02-06T09:47:01.000Z","size":390,"stargazers_count":131,"open_issues_count":5,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T07:07:32.900Z","etag":null,"topics":["angular","icon","icons","plugin","react","spritesheet","vite","vitejs","vue"],"latest_commit_sha":null,"homepage":"","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/forge-42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.MD","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-27T17:02:41.000Z","updated_at":"2025-03-27T20:36:39.000Z","dependencies_parsed_at":"2024-04-30T19:28:26.668Z","dependency_job_id":"8d5ab079-5abc-4cdf-b354-6c20f7126a2b","html_url":"https://github.com/forge-42/vite-plugin-icons-spritesheet","commit_stats":{"total_commits":28,"total_committers":5,"mean_commits":5.6,"dds":0.3214285714285714,"last_synced_commit":"58aeffc8cf0e4f5d5a0b8c952df6a19fae4bc6bf"},"previous_names":["forge42dev/vite-plugin-icons-spritesheet","forge-42/vite-plugin-icons-spritesheet"],"tags_count":11,"template":false,"template_full_name":"forge-42/open-source-stack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Fvite-plugin-icons-spritesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Fvite-plugin-icons-spritesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Fvite-plugin-icons-spritesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/forge-42%2Fvite-plugin-icons-spritesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/forge-42","download_url":"https://codeload.github.com/forge-42/vite-plugin-icons-spritesheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305932,"owners_count":20917208,"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":["angular","icon","icons","plugin","react","spritesheet","vite","vitejs","vue"],"created_at":"2025-02-05T07:02:28.246Z","updated_at":"2025-04-05T08:04:32.137Z","avatar_url":"https://github.com/forge-42.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![GitHub Repo stars](https://img.shields.io/github/stars/forge42dev/vite-plugin-icons-spritesheet?style=social)\n![npm](https://img.shields.io/npm/v/vite-plugin-icons-spritesheet?style=plastic)\n![GitHub](https://img.shields.io/github/license/forge42dev/vite-plugin-icons-spritesheet?style=plastic)\n![npm](https://img.shields.io/npm/dy/vite-plugin-icons-spritesheet?style=plastic) \n![npm](https://img.shields.io/npm/dw/vite-plugin-icons-spritesheet?style=plastic) \n![GitHub top language](https://img.shields.io/github/languages/top/forge42dev/vite-plugin-icons-spritesheet?style=plastic) \n\n# vite-plugin-icons-spritesheet\nA Vite plugin to generate a spritesheet with icons from a directory, re-runs on every edit/delete/add to the directory that is being watched.\n\nOptionally generates TypeScript types for the icon names that it outputs.\n\nIf you want to learn more about this approach and it's benefits \ncheck it out here:\nhttps://www.jacobparis.com/content/svg-icons\n\n## Installation\n```bash\nnpm install -D vite-plugin-icons-spritesheet\n```\n\n## Usage\n```javascript\n// vite.config.js\nimport { iconsSpritesheet } from 'vite-plugin-icons-spritesheet';\n\nexport default {\n  plugins: [\n     iconsSpritesheet({\n      // Defaults to false, should it generate TS types for you\n      withTypes: true,\n      // The path to the icon directory\n      inputDir: \"icons\",\n      // Output path for the generated spritesheet and types\n      outputDir: \"public/icons\",\n      // Output path for the generated type file, defaults to types.ts in outputDir\n      typesOutputFile: \"app/icons.ts\",\n      // The name of the generated spritesheet, defaults to sprite.svg\n      fileName: \"icon.svg\",\n      // The cwd, defaults to process.cwd()\n      cwd: process.cwd(),\n      // What formatter to use to format the generated files, prettier or biome, defaults to no formatter\n      formatter: \"biome\",\n      // Callback function that is called when the script is generating the icon name\n      // This is useful if you want to modify the icon name before it is written to the file\n      iconNameTransformer: (iconName) =\u003e iconName\n    }),\n  ],\n};\n```\n\nYou can also pass an array of configs to the plugin to generate multiple spritesheets and types files at the same time (and watch those folders for changes).\n```javascript\n// vite.config.js\nimport { iconsSpritesheet } from 'vite-plugin-icons-spritesheet';\n\nexport default {\n  plugins: [\n     iconsSpritesheet([\n      { \n        withTypes: true, \n        inputDir: \"icons/subset1\", \n        outputDir: \"public/icons1\", \n        typesOutputFile: \"app/icons1.ts\", \n        fileName: \"icon1.svg\", \n      },\n      { \n        withTypes: true, \n        inputDir: \"icons/subset2\",\n        outputDir: \"public/icons2\", \n        typesOutputFile: \"app/icons2.ts\", \n        fileName: \"icon2.svg\", \n      },\n    ]),\n  ],\n};\n```\n\n\nExample component file:\n\n```jsx\nimport spriteHref from \"~/path/sprite.svg\"\nimport type { SVGProps } from \"react\"\nimport type { IconName } from \"~/path/types.ts\"\n\nexport function Icon({\n  name,\n  ...props\n}: SVGProps\u003cSVGSVGElement\u003e \u0026 {\n  name: IconName\n}) {\n  return (\n    \u003csvg {...props}\u003e\n      \u003cuse href={`${spriteHref}#${name}`} /\u003e\n    \u003c/svg\u003e\n  )\n}\n```\n\nComponent usage:\n\n```jsx\n\u003cIcon name=\"plus\" /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforge-42%2Fvite-plugin-icons-spritesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fforge-42%2Fvite-plugin-icons-spritesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fforge-42%2Fvite-plugin-icons-spritesheet/lists"}