{"id":16258572,"url":"https://github.com/dword-design/nuxt-svg-sprite-loader","last_synced_at":"2025-10-24T00:57:15.901Z","repository":{"id":40570431,"uuid":"282615784","full_name":"dword-design/nuxt-svg-sprite-loader","owner":"dword-design","description":"Nuxt.js module for svg-sprite-loader.","archived":false,"fork":false,"pushed_at":"2025-02-20T05:02:08.000Z","size":3356,"stargazers_count":1,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T09:34:24.524Z","etag":null,"topics":["id","loader","nuxt","sprite","svg","use","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dword-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"custom":["buymeacoffee.com/dword","paypal.me/SebastianLandwehr"],"github":"dword-design","patreon":"dworddesign"}},"created_at":"2020-07-26T09:18:29.000Z","updated_at":"2025-02-20T05:02:12.000Z","dependencies_parsed_at":"2023-11-28T12:27:03.205Z","dependency_job_id":"f6f3390f-2e59-4573-bbce-e875feb2ac34","html_url":"https://github.com/dword-design/nuxt-svg-sprite-loader","commit_stats":{"total_commits":131,"total_committers":8,"mean_commits":16.375,"dds":0.5954198473282443,"last_synced_commit":"d4467fa38eb5a5c0d7a45b5a44298d64a1c90529"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-svg-sprite-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-svg-sprite-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-svg-sprite-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dword-design%2Fnuxt-svg-sprite-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dword-design","download_url":"https://codeload.github.com/dword-design/nuxt-svg-sprite-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243815579,"owners_count":20352194,"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":["id","loader","nuxt","sprite","svg","use","webpack"],"created_at":"2024-10-10T16:00:41.551Z","updated_at":"2025-10-24T00:57:10.869Z","avatar_url":"https://github.com/dword-design.png","language":"JavaScript","funding_links":["buymeacoffee.com/dword","paypal.me/SebastianLandwehr","https://github.com/sponsors/dword-design","https://patreon.com/dworddesign","https://www.buymeacoffee.com/dword","https://paypal.me/SebastianLandwehr","https://www.patreon.com/dworddesign"],"categories":[],"sub_categories":[],"readme":"\u003c!-- TITLE/ --\u003e\n# nuxt-svg-sprite-loader\n\u003c!-- /TITLE --\u003e\n\n\u003c!-- BADGES/ --\u003e\n  \u003cp\u003e\n    \u003ca href=\"https://npmjs.org/package/nuxt-svg-sprite-loader\"\u003e\n      \u003cimg\n        src=\"https://img.shields.io/npm/v/nuxt-svg-sprite-loader.svg\"\n        alt=\"npm version\"\n      \u003e\n    \u003c/a\u003e\u003cimg src=\"https://img.shields.io/badge/os-linux%20%7C%C2%A0macos%20%7C%C2%A0windows-blue\" alt=\"Linux macOS Windows compatible\"\u003e\u003ca href=\"https://github.com/dword-design/nuxt-svg-sprite-loader/actions\"\u003e\n      \u003cimg\n        src=\"https://github.com/dword-design/nuxt-svg-sprite-loader/workflows/build/badge.svg\"\n        alt=\"Build status\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://codecov.io/gh/dword-design/nuxt-svg-sprite-loader\"\u003e\n      \u003cimg\n        src=\"https://codecov.io/gh/dword-design/nuxt-svg-sprite-loader/branch/master/graph/badge.svg\"\n        alt=\"Coverage status\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://david-dm.org/dword-design/nuxt-svg-sprite-loader\"\u003e\n      \u003cimg src=\"https://img.shields.io/david/dword-design/nuxt-svg-sprite-loader\" alt=\"Dependency status\"\u003e\n    \u003c/a\u003e\u003cimg src=\"https://img.shields.io/badge/renovate-enabled-brightgreen\" alt=\"Renovate enabled\"\u003e\u003cbr/\u003e\u003ca href=\"https://gitpod.io/#https://github.com/dword-design/nuxt-svg-sprite-loader\"\u003e\n      \u003cimg\n        src=\"https://gitpod.io/button/open-in-gitpod.svg\"\n        alt=\"Open in Gitpod\"\n        width=\"114\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://www.buymeacoffee.com/dword\"\u003e\n      \u003cimg\n        src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\"\n        alt=\"Buy Me a Coffee\"\n        width=\"114\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://paypal.me/SebastianLandwehr\"\u003e\n      \u003cimg\n        src=\"https://sebastianlandwehr.com/images/paypal.svg\"\n        alt=\"PayPal\"\n        width=\"163\"\n      \u003e\n    \u003c/a\u003e\u003ca href=\"https://www.patreon.com/dworddesign\"\u003e\n      \u003cimg\n        src=\"https://sebastianlandwehr.com/images/patreon.svg\"\n        alt=\"Patreon\"\n        width=\"163\"\n      \u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- /BADGES --\u003e\n\n\u003c!-- DESCRIPTION/ --\u003e\nNuxt.js module for svg-sprite-loader.\n\u003c!-- /DESCRIPTION --\u003e\n\n\u003c!-- INSTALL/ --\u003e\n## Install\n\n```bash\n# npm\n$ npm install nuxt-svg-sprite-loader\n\n# Yarn\n$ yarn add nuxt-svg-sprite-loader\n```\n\u003c!-- /INSTALL --\u003e\n\n## Usage\n\nAdd the module to your Nuxt.js modules list in `nuxt.config.js`:\n```js\nexport default {\n  ...\n  modules: [\n    'nuxt-svg-sprite-loader'\n  ]\n}\n```\n\nUse an SVG in your page:\n```vue\n\u003ctemplate\u003e\n  \u003csvg\u003e\u003cuse :xlink:href=\"'#' + Logo.id\"\u003e\u003c/use\u003e\u003c/svg\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Logo from '@/assets/logo.svg'\n\nexport default {\n  computed: {\n    Logo: () =\u003e Logo,\n  },\n}\n\u003c/script\u003e\n```\n\nOr use it with JSX:\n```vue\n\u003cscript\u003e\nimport Logo from '@/assets/logo.svg'\n\nexport default {\n  render() {\n    return \u003csvg\u003e\u003cuse xlinkHref={`#\\${Logo.id}`}\u003e\u003c/use\u003e\u003c/svg\u003e\n  }\n}\n\u003c/script\u003e\n```\n\n## Options\n\nYou can pass options to the module, which are passed down to the [svg-sprite-loader](https://www.npmjs.com/package/svg-sprite-loader) NPM package. Please refer to this for the available options.\n\nDirectly:\n```js\nexport default {\n  ...\n  modules: [\n    ['nuxt-svg-sprite-loader', {\n      symbolId: 'foo-[name]'\n    }]\n  ]\n}\n```\n\nTop-level:\n```js\nexport default {\n  ...\n  modules: [\n    'nuxt-svg-sprite-loader'\n  ],\n  spriteSvgLoader: {\n    symbolId: 'foo-[name]'\n  }\n}\n```\n\n\u003c!-- LICENSE/ --\u003e\n## Contribute\n\nAre you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-svg-sprite-loader/issues) or a [pull request](https://github.com/dword-design/nuxt-svg-sprite-loader/pulls)! ⚙️\n\n## Support\n\nHey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:\n\n\u003cp\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/dword\"\u003e\n    \u003cimg\n      src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\"\n      alt=\"Buy Me a Coffee\"\n      width=\"114\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;If you want to send me a one time donation. The coffee is pretty good 😊.\u003cbr/\u003e\n  \u003ca href=\"https://paypal.me/SebastianLandwehr\"\u003e\n    \u003cimg\n      src=\"https://sebastianlandwehr.com/images/paypal.svg\"\n      alt=\"PayPal\"\n      width=\"163\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;Also for one time donations if you like PayPal.\u003cbr/\u003e\n  \u003ca href=\"https://www.patreon.com/dworddesign\"\u003e\n    \u003cimg\n      src=\"https://sebastianlandwehr.com/images/patreon.svg\"\n      alt=\"Patreon\"\n      width=\"163\"\n    \u003e\n  \u003c/a\u003e\u0026nbsp;Here you can support me regularly, which is great so I can steadily work on projects.\n\u003c/p\u003e\n\nThanks a lot for your support! ❤️\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)\n\u003c!-- /LICENSE --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdword-design%2Fnuxt-svg-sprite-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdword-design%2Fnuxt-svg-sprite-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdword-design%2Fnuxt-svg-sprite-loader/lists"}