{"id":24173146,"url":"https://github.com/appsaeed/vite-svg","last_synced_at":"2025-03-02T13:17:40.029Z","repository":{"id":237040197,"uuid":"793711901","full_name":"appsaeed/vite-svg","owner":"appsaeed","description":"Vite SVG plugin: effortless SVG import with support for various formats (JSON, raw string, object, etc.).","archived":false,"fork":false,"pushed_at":"2024-05-22T15:06:18.000Z","size":16,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-12T09:13:04.119Z","etag":null,"topics":["extract-svg-viewbox","npm-package","svg","svg-icons","svg-to-json","svg-to-raw","svg-to-string","vite-loader","vite-plugin","vite-svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-svg","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/appsaeed.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2024-04-29T18:17:27.000Z","updated_at":"2024-05-22T19:22:12.000Z","dependencies_parsed_at":"2024-04-29T18:30:44.278Z","dependency_job_id":"9d6cbc79-ada2-4734-8dae-5ac3923c5f14","html_url":"https://github.com/appsaeed/vite-svg","commit_stats":null,"previous_names":["appsaeed/vite-svg"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Fvite-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Fvite-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Fvite-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appsaeed%2Fvite-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appsaeed","download_url":"https://codeload.github.com/appsaeed/vite-svg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241509656,"owners_count":19974071,"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":["extract-svg-viewbox","npm-package","svg","svg-icons","svg-to-json","svg-to-raw","svg-to-string","vite-loader","vite-plugin","vite-svg"],"created_at":"2025-01-13T01:14:36.184Z","updated_at":"2025-03-02T13:17:40.004Z","avatar_url":"https://github.com/appsaeed.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Intro\nVite SVG plugin: effortless SVG import with support for various formats JSON, raw string, object, etc.\n\n## Installation\nInstall with [npm](https://www.npmjs.com/)\n```sh\nnpm i -D vite-svg\n```\nor Install with [yarn](https://www.npmjs.com/package/yarn)\n```sh\nyarn add vite-svg\n```\nor Install with [pnpm](https://www.npmjs.com/package/pnpm)\n```sh\npnpm install vite-svg\n```\n\n# Usage\nVite plugin configuration \n**vite.config.js**\n````js\nimport { defineConfig } from 'vite';\nimport viteSVG from 'vite-svg';\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    viteSVG({default: 'raw'})\n  ],\n});\n````\nExtract default options in box and now pass JSON \n````js\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [\n    viteSVG({\n        default: 'json'\n    })\n  ],\n});\n````\n## SVG to object\n**Extract SVG to a simple object with id attribute**\n```js\nimport javascript from './javascript.svg?box'\n\nconsole.log(javascript)\n//output example\n{\n    \"id\": \"\",\n    \"viewBox\": \"0 0 256 256\",\n    \"url\": \"javascript.svg#\"\n}\n```\n## SVG to json\n**Extract svg to json with all properties**\n````js\nimport javascript from './javascript.svg?json'\n\nconsole.log(javascript)\n//output example\n{\n    \"xmlns\": \"...\",\n    \"xmlns:xlink\": \"...\",\n    \"aria-hidden\": \"true\",\n    \"role\": \"img\",\n    \"class\": \"iconify iconify--logos\",\n    \"width\": \"32\",\n    \"height\": \"32\",\n    \"preserveAspectRatio\": \"xMidYMid meet\",\n    \"viewBox\": \"0 0 256 256\",\n    \"fill\": \"#F7DF1E\",\n    \"d\": \"....\"\n    ...\n}\n````\n\n## SVG to raw\n**Extract SVG to raw as string**\n````js\nimport javascript from './javascript.svg?raw'\n\nconsole.log(javascript)\n\n//output example: \u003csvg xmlns=\"...\" xmlns:xlink=\"...\" aria-hidden=\"true\" role=\"img\" class=\"iconify iconify--logos\" width=\"32\" height=\"32\"  viewBox=\"0 0 256 256\"\u003e\u003cpath fill=\"#F7DF1E\" d=\"...\"\u003e\u003c/path\u003e\u003cpath d=\".....\"\u003e\u003c/path\u003e\u003c/svg\u003e\n````\n\n## Author\n**Saeed Hossen**\n\n-   [Website](https://appsaeed.github.io)\n-   [Linkden](https://www.linkedin.com/in/appsaeed)\n-   [Email](appsaeed7@gmail.com)\n\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappsaeed%2Fvite-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappsaeed%2Fvite-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappsaeed%2Fvite-svg/lists"}