{"id":13506570,"url":"https://github.com/nuxt-modules/svg-sprite","last_synced_at":"2026-01-12T05:54:14.906Z","repository":{"id":34714716,"uuid":"168764701","full_name":"nuxt-modules/svg-sprite","owner":"nuxt-modules","description":"Optimize SVG files and combine them into sprite","archived":false,"fork":false,"pushed_at":"2025-05-12T14:47:40.000Z","size":3567,"stargazers_count":310,"open_issues_count":56,"forks_count":42,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-12T15:56:01.301Z","etag":null,"topics":["nuxt-module","nuxtjs","sprites","svg","svg-sprite"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/","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/nuxt-modules.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2019-02-01T21:49:45.000Z","updated_at":"2025-04-10T07:53:09.000Z","dependencies_parsed_at":"2024-02-02T00:31:01.180Z","dependency_job_id":"7c8edfd3-54b8-497c-9bf5-22f698f1a12f","html_url":"https://github.com/nuxt-modules/svg-sprite","commit_stats":{"total_commits":245,"total_committers":21,"mean_commits":"11.666666666666666","dds":0.6285714285714286,"last_synced_commit":"885e65e98b00848e98446662a62327591032fd5b"},"previous_names":["nuxt-modules/svg-sprite","nuxt-community/svg-sprite-module"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fsvg-sprite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fsvg-sprite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fsvg-sprite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxt-modules%2Fsvg-sprite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxt-modules","download_url":"https://codeload.github.com/nuxt-modules/svg-sprite/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"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","nuxtjs","sprites","svg","svg-sprite"],"created_at":"2024-08-01T01:00:53.871Z","updated_at":"2026-01-12T05:54:09.888Z","avatar_url":"https://github.com/nuxt-modules.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"# SVG Sprite Module\n\n[![npm (scoped with tag)](https://img.shields.io/npm/v/@nuxtjs/svg-sprite/latest.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/svg-sprite)\n[![npm](https://img.shields.io/npm/dt/@nuxtjs/svg-sprite.svg?style=flat-square)](https://npmjs.com/package/@nuxtjs/svg-sprite)\n\n\u003e Optimized and Easy way to use SVG files in Nuxt\n\nSprites help increase speed, maintain a consistent development workflow, and make the creation of icons much faster. SVG sprites are typically created using icons of a similar shape or form whereas larger scale graphics are one-off applications.\n\n**Demo**: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/\n\n:warning: **NOTE**: SVG Sprites does not work on IE, if you wish to support IE you could use [svg4everybody](https://github.com/jonathantneal/svg4everybody). Take a look at [this issue](https://github.com/nuxt-community/svg-sprite-module/issues/42#issuecomment-516056532) to see how.\n\n:rainbow: **NOTE**: If you wish to load single SVG icon and you don't want to create sprites, use [Nuxt SVG Module](https://github.com/nuxt-community/svg-module). SVG module for Nuxt.js, allows you to import .svg files in multiple ways depending on the resource query you provide.\n\n## Installation\n\n```bash\nyarn add @nuxtjs/svg-sprite\n# or\nnpm i @nuxtjs/svg-sprite\n```\n\n## Usage\n\nAdd `@nuxtjs/svg-sprite` to modules section of `nuxt.config`:\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\n    '@nuxtjs/svg-sprite',\n  ],\n  svgSprite: {\n    // manipulate module options\n  }\n})\n```\n\nPlace your svg files in `~/assets/sprite/svg/`, say `sample.svg` and use your image with globally registered `svg-icon` component:\n\n```vue\n\u003csvg-icon name=\"sample\" /\u003e\n```\n\nTo create different sprites, create custom directory inside `~/assets/sprite/svg/` and put your svg files inside it and place directory tile before icon name (example: `~/assets/sprite/svg/my-sprite/my-image.svg`):\n\n```vue\n\u003csvg-icon name=\"my-sprite/my-image\" /\u003e\n```\n\nModule create a page that list all of icons for you, by default you can see this page in `/_icons` path.  \n**Note:** This page creates in `dev` mode, So you can't see it in production.\n\n## Options\n\nModule default options:\n\n\n| Option | Default | Description |\n| ------ | ------- | ----------- |\n| input | `~/assets/sprite/svg` | Directory of original svg files |\n| output | `~/assets/sprite/gen` | Directory to store generated sprites |\n| defaultSprite | `icons` | Name of default sprite (default sprite consist of all svgs that place directly inside `input` directory) |\n| elementClass | `icon` | global class of all `\u003csvg-icon\u003e` instances |\n| spriteClassPrefix | `sprite-` | Prefix of sprite specific classes |\n| publicPath | `null` | Specifies a custom public path for the sprites |\n| iconsPath | `_icons` | Custom path for icons list page (In order to disable this page, pass `false` or `null` to this option) |\n| svgoConfig | `null` | Custom config object for SVGO, [How to customize SVGO config](/docs/svgo-config.md) |\n\nYou can update them with the `svgSprite` option in `nuxt.config`:\n\n```js\nexport default defineNuxtConfig({\n  modules: ['@nuxtjs/svg-sprite'],\n  svgSprite: {\n    input: '~/assets/svg/'\n  }\n}\n```\n\n## Props\n\n| Prop | Description |\n| --- | --- |\n| name | icon path with format `SPRITE_NAME/ICON_NAME`, `SPRITE_NAME` can be omitted for default sprite  |\n| title | Accessibility title for icon, this props will transform to `\u003ctitle\u003e` tag inside `\u003csvg\u003e` |\n| desc | Accessibility description for icon, this props will transform to `\u003cdesc\u003e` tag inside `\u003csvg\u003e` |\n\n## Integrations\n### Storybook\nThis module provides a story to list and search available icons of your project. You can see stories under `stories` directory. \nIf you are using [`@nuxtjs/storybook`](https://storybook.nuxtjs.org) you can see the SvgSprites stories under `Modules` section in your storybook. Sprites will show in your Storybook, unless you disable/hide the story using [Storybook's `modules` option](https://storybook.nuxtjs.org/options#modules)\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\nYou can also contribute directly with CodeSandBox: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/\n\n## License\n\n[MIT License](./LICENSE)\nCopyright (c) Nuxt Community - Ahad Birang\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fsvg-sprite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxt-modules%2Fsvg-sprite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxt-modules%2Fsvg-sprite/lists"}