{"id":20823141,"url":"https://github.com/developmint/nuxt-svg-loader","last_synced_at":"2025-05-16T01:05:18.307Z","repository":{"id":33140598,"uuid":"153007757","full_name":"Developmint/nuxt-svg-loader","owner":"Developmint","description":"SVGs as components, also on the server side!","archived":false,"fork":false,"pushed_at":"2025-05-08T06:45:29.000Z","size":734,"stargazers_count":143,"open_issues_count":23,"forks_count":14,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-16T01:05:17.626Z","etag":null,"topics":["nuxt-module","nuxt-svg-loader","nuxtjs","svg","vue"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Developmint.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["manniL"],"custom":["https://www.lichter.io/support-me/"]}},"created_at":"2018-10-14T18:53:36.000Z","updated_at":"2025-03-15T20:59:06.000Z","dependencies_parsed_at":"2023-11-18T02:00:46.098Z","dependency_job_id":"1ea70f49-6cd2-44bf-9ded-2a6463910f3d","html_url":"https://github.com/Developmint/nuxt-svg-loader","commit_stats":{"total_commits":54,"total_committers":11,"mean_commits":4.909090909090909,"dds":0.4629629629629629,"last_synced_commit":"7e3a18d1009120c9d1fa7aad347edb1cf111db26"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-svg-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-svg-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-svg-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Developmint%2Fnuxt-svg-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Developmint","download_url":"https://codeload.github.com/Developmint/nuxt-svg-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"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-module","nuxt-svg-loader","nuxtjs","svg","vue"],"created_at":"2024-11-17T22:17:26.175Z","updated_at":"2025-05-16T01:05:18.290Z","avatar_url":"https://github.com/Developmint.png","language":"JavaScript","readme":"# Nuxt SVG Loader - SVGs as components, also on the server side!\n[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-svg-loader/latest.svg?style=flat-square)](https://npmjs.com/package/nuxt-svg-loader)\n[![npm](https://img.shields.io/npm/dt/nuxt-svg-loader.svg?style=flat-square)](https://npmjs.com/package/nuxt-svg-loader)\n[![Build Status](https://travis-ci.com/Developmint/nuxt-svg-loader.svg?branch=master)](https://travis-ci.com/Developmint/nuxt-svg-loader)\n[![codecov](https://codecov.io/gh/Developmint/nuxt-svg-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/Developmint/nuxt-svg-loader)\n[![Dependencies](https://david-dm.org/Developmint/nuxt-svg-loader/status.svg?style=flat-square)](https://david-dm.org/Developmint/nuxt-svg-loader)\n[![js-standard-style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com)\n [![thanks](https://img.shields.io/badge/thanks-%E2%99%A5-ff69b4.svg)](https://thanks.lichter.io/)\n\n\u003e\n\n[📖 **Release Notes**](./CHANGELOG.md)\n\n## Features\n\n* Full support of SVGs as components. Import them like your Vue SFCs\n* Use Vue bindings as you'd do it with normal components\n* Built on top of [svg-to-vue-component](https://github.com/egoist/svg-to-vue-component)\n* Nuxt 2 (and only Nuxt 2) support\n* Fully tested!\n\n## Demo\n\nA live demo is available through the [CodeSandBox](https://codesandbox.io/s/github/Developmint/nuxt-svg-loader/tree/master) of the repo.\n\n## Setup\n\n- Add `nuxt-svg-loader` as a dependency using yarn or npm to your project\n- Add `nuxt-svg-loader` to `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    'nuxt-svg-loader',\n  ]\n}\n```\n\n- Now you can use your svg files like regular Vue components\n- You can use inline svg as well by adding `?inline` at the end of the file path\n```\n\u003ctemplate\u003e\n  \u003cnav\u003e\n    \u003ca href=\"https://github.com/vuejs/vue\"\u003e\n      \u003cVueLogo /\u003e\n      Vue\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/svg/svgo\"\u003e\n      \u003cSVGOLogo /\u003e\n      SVGO\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n      \u003cWebpackLogo /\u003e\n      webpack\n    \u003c/a\u003e\n    \u003c!-- Inline svg --\u003e\n    \u003ca class=\"with-background-svg\" href=\"https://github.com/webpack/webpack\"\u003e\n      webpack\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/webpack/webpack\"\u003e\n      \u003cimg src=\"../components/NuxtTwo.svg?inline\"\u003e\n      webpack\u003e\n    \u003c/a\u003e\n  \u003c/nav\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport VueLogo from '@/assets/svg/vue.svg';\nimport SVGOLogo from '@/assets/svg/svgo.svg';\nimport WebpackLogo from '@/assets/svg/webpack.svg';\n\nexport default {\n  name: 'Example',\n  components: {\n    VueLogo,\n    SVGOLogo,\n    WebpackLogo,\n  }\n};\n\u003c/script\u003e\n\u003cstyle\u003e\n.with-background-svg {\n  background: url('@/assets/svg/vue.svg?inline')\n}\n\u003c/style\u003e\n```\n\n- No more options are needed. It'll simply work\n\n## Configuration\n\nThe plugin will work seamlessly out of the box.\nIt will also include SVGO defaults to avoid collisions between your optimized SVG files!\n \nIf you want to configure the underlying loader (or SVGO), you can do that easily as well.\n(All options available [here](https://github.com/egoist/svg-to-vue-component#loader-options))\n\n```js\n// file: nuxt.config.js\n\nexport default {\n  // ...\n  // Your loader options as svgLoader object\n  svgLoader: {\n    svgoConfig: {\n      plugins: [\n        { prefixIds: false } // Disables prefixing for SVG IDs\n      ]\n    }\n  }\n}\n```\n\n## Migrating from 0.x\n\n1. Update the deps (of course!)\n2. Rename `svgo` to `svgoConfig`\n3. If you used id prefixing manually before, you can delete the config:\n\n```js\nexport default {\n  svgLoader: {\n    svgo: { //Rename to svgoConfig  \n      plugins: [\n        { prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)\n      ]\n    }\n  }\n}\n```\n\n## How to fix Eslint auto lint error\nIf you turn on Eslint on save by server, you should exclude `.svg` files of `eslint-loader`.\n\nExample:\n```js\n// nuxt.config.js\nbuild: {\n    extend(config, ctx) {\n    // Run ESLint on save\n    if (ctx.isDev \u0026\u0026 ctx.isClient) {\n      config.module.rules.push({\n        enforce: 'pre',\n        test: /\\.(js|vue)$/,\n        loader: 'eslint-loader',\n        exclude: /(node_modules)|(\\.svg$)/ /* \u003c--- here */\n      })\n    }\n  }\n}\n```\n\n## Development\n\n- Clone this repository\n- Install dependencies using `yarn install` or `npm install`\n- Start development server using `npm run dev`\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) Alexander Lichter\n","funding_links":["https://github.com/sponsors/manniL","https://www.lichter.io/support-me/"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopmint%2Fnuxt-svg-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevelopmint%2Fnuxt-svg-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevelopmint%2Fnuxt-svg-loader/lists"}