Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nuxt-modules/svg-sprite
Optimize SVG files and combine them into sprite
https://github.com/nuxt-modules/svg-sprite
nuxt-module nuxtjs sprites svg svg-sprite
Last synced: 3 days ago
JSON representation
Optimize SVG files and combine them into sprite
- Host: GitHub
- URL: https://github.com/nuxt-modules/svg-sprite
- Owner: nuxt-modules
- License: mit
- Created: 2019-02-01T21:49:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T16:22:08.000Z (6 days ago)
- Last Synced: 2024-10-29T17:12:19.515Z (5 days ago)
- Topics: nuxt-module, nuxtjs, sprites, svg, svg-sprite
- Language: TypeScript
- Homepage: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/
- Size: 3.41 MB
- Stars: 300
- Watchers: 10
- Forks: 42
- Open Issues: 56
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG Sprite Module
[](https://npmjs.com/package/@nuxtjs/svg-sprite)
[](https://npmjs.com/package/@nuxtjs/svg-sprite)
> Optimized and Easy way to use SVG files in Nuxt
Sprites 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.
**Demo**: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/
: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.
: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.
## Installation
```bash
yarn add @nuxtjs/svg-sprite
# or
npm i @nuxtjs/svg-sprite
```
## Usage
Add `@nuxtjs/svg-sprite` to modules section of `nuxt.config`:
```ts
export default defineNuxtConfig({
modules: [
'@nuxtjs/svg-sprite',
],
svgSprite: {
// manipulate module options
}
})
```
Place your svg files in `~/assets/sprite/svg/`, say `sample.svg` and use your image with globally registered `svg-icon` component:
```vue
```
To 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`):
```vue
```
Module create a page that list all of icons for you, by default you can see this page in `/_icons` path.
**Note:** This page creates in `dev` mode, So you can't see it in production.
## Options
Module default options:
| Option | Default | Description |
| ------ | ------- | ----------- |
| input | `~/assets/sprite/svg` | Directory of original svg files |
| output | `~/assets/sprite/gen` | Directory to store generated sprites |
| defaultSprite | `icons` | Name of default sprite (default sprite consist of all svgs that place directly inside `input` directory) |
| elementClass | `icon` | global class of all `` instances |
| spriteClassPrefix | `sprite-` | Prefix of sprite specific classes |
| publicPath | `null` | Specifies a custom public path for the sprites |
| iconsPath | `_icons` | Custom path for icons list page (In order to disable this page, pass `false` or `null` to this option) |
| svgoConfig | `null` | Custom config object for SVGO, [How to customize SVGO config](/docs/svgo-config.md) |
You can update them with the `svgSprite` option in `nuxt.config`:
```js
export default defineNuxtConfig({
modules: ['@nuxtjs/svg-sprite'],
svgSprite: {
input: '~/assets/svg/'
}
}
```
## Props
| Prop | Description |
| --- | --- |
| name | icon path with format `SPRITE_NAME/ICON_NAME`, `SPRITE_NAME` can be omitted for default sprite |
| title | Accessibility title for icon, this props will transform to `` tag inside `` |
| desc | Accessibility description for icon, this props will transform to `` tag inside `` |
## Integrations
### Storybook
This module provides a story to list and search available icons of your project. You can see stories under `stories` directory.
If 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)
## Development
- Clone this repository
- Install dependencies using `yarn install` or `npm install`
- Start development server using `npm run dev`
You can also contribute directly with CodeSandBox: https://codesandbox.io/s/github/nuxt-community/svg-sprite-module/
## License
[MIT License](./LICENSE)
Copyright (c) Nuxt Community - Ahad Birang