{"id":16184164,"url":"https://github.com/mini-ghost/nuxt-svgo-loader","last_synced_at":"2025-05-08T23:48:44.414Z","repository":{"id":212428358,"uuid":"731013510","full_name":"Mini-ghost/nuxt-svgo-loader","owner":"Mini-ghost","description":"Nuxt module to load SVG files as Vue components, using SVGO for optimization.","archived":false,"fork":false,"pushed_at":"2025-03-09T05:58:10.000Z","size":1451,"stargazers_count":23,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-08T23:48:38.917Z","etag":null,"topics":["nuxt","nuxt-module","svgo"],"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/Mini-ghost.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-12-13T07:02:21.000Z","updated_at":"2025-04-21T07:31:35.000Z","dependencies_parsed_at":"2024-07-22T17:14:30.623Z","dependency_job_id":"4c1056dc-dc0b-454d-b4b7-4da853d8c3f7","html_url":"https://github.com/Mini-ghost/nuxt-svgo-loader","commit_stats":{"total_commits":28,"total_committers":4,"mean_commits":7.0,"dds":0.1071428571428571,"last_synced_commit":"0c005adbd3b9f20631b04e5276edb30a66cabdc5"},"previous_names":["mini-ghost/nuxt-svg-loader","mini-ghost/nuxt-svgo-loader"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-ghost%2Fnuxt-svgo-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-ghost%2Fnuxt-svgo-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-ghost%2Fnuxt-svgo-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mini-ghost%2Fnuxt-svgo-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mini-ghost","download_url":"https://codeload.github.com/Mini-ghost/nuxt-svgo-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253166477,"owners_count":21864467,"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":["nuxt","nuxt-module","svgo"],"created_at":"2024-10-10T07:09:12.889Z","updated_at":"2025-05-08T23:48:44.396Z","avatar_url":"https://github.com/Mini-ghost.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Svgo Loader\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nNuxt module to load SVG files as Vue components, using SVGO for optimization.\n\n## Features\n\n- 📁 Load SVG files as Vue components.\n- 🎨 Optimize SVGs using SVGO.\n- 🛠️ Seamless integration with Nuxt DevTools.\n\n## Installation\n\nInstall and add nuxt-svgo-loader to your nuxt.config.\n\n```bash\nnpx nuxi@latest module add nuxt-svgo-loader\n```\n\n```ts\nexport default defineNuxtConfig({\n  modules: ['nuxt-svgo-loader'],\n  svgoLoader: {\n    // Options here will be passed to `vite-svg-loader`\n  }\n})\n```\n\n\u003e [!NOTE]\n\u003e Since `nuxt-svgo-loader` is a Nuxt module based on `vite-svg-loader`, the configuration for `svgoLoader` remains identical to that of `vite-svg-loader`. You can refer to the documentation of `vite-svg-loader` for the available options [here](https://github.com/jpkleemans/vite-svg-loader?tab=readme-ov-file#vite-svg-loader).\n\n## Usage\n\n### Component\n\nSVGs can be explicitly imported as Vue components using the `?component` suffix:\n\n```ts\nimport NuxtSvg from '~/assets/svg/nuxt.svg'\n// \u003cNuxtSvg /\u003e\n```\n\n### URL\n\nSVGs can be imported as URLs using the `?url` suffix:\n\n```ts\nimport nuxtSvgUrl from '~/assets/svg/nuxt.svg?url'\n// nuxtSvgUrl === '/_nuxt/assets/svg/nuxt.svg'\n```\n\n### Raw\n\nSVGs can be imported as raw strings using the `?raw` suffix:\n\n```ts\nimport nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'\n// nuxtSvgRaw === '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" ...'\n```\n\n### Skip SVGO for a single file\n\nSVGO can be explicitly disabled for one file by adding the `?skipsvgo` suffix:\n\n```ts\nimport NuxtSvgWithoutOptimizer from '~/assets/svg/nuxt.svg?skipsvgo'\n// \u003cNuxtSvgWithoutOptimizer /\u003e\n```\n\n## DevTools\n\nThis module adds a new tab to the Nuxt DevTools, which allows you to inspect the SVG files.\n\n\u003cp align='center'\u003e\n\u003cimg src='https://raw.githubusercontent.com/Mini-ghost/nuxt-svgo-loader/main/.github/assets/devtools.png' width='100%'/\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT](./LICENSE) License © 2023-PRESENT [Alex Liu](https://github.com/Mini-ghost)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-svgo-loader?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-svgo-loader\n[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-svgo-loader?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-svgo-loader\n[license-src]: https://img.shields.io/npm/l/nuxt-svgo-loader.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-svgo-loader\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmini-ghost%2Fnuxt-svgo-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmini-ghost%2Fnuxt-svgo-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmini-ghost%2Fnuxt-svgo-loader/lists"}