https://github.com/dword-design/nuxt-svg-sprite-loader
Nuxt.js module for svg-sprite-loader.
https://github.com/dword-design/nuxt-svg-sprite-loader
id loader nuxt sprite svg use webpack
Last synced: 8 months ago
JSON representation
Nuxt.js module for svg-sprite-loader.
- Host: GitHub
- URL: https://github.com/dword-design/nuxt-svg-sprite-loader
- Owner: dword-design
- License: other
- Created: 2020-07-26T09:18:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-20T05:02:08.000Z (over 1 year ago)
- Last Synced: 2025-02-27T09:34:24.524Z (over 1 year ago)
- Topics: id, loader, nuxt, sprite, svg, use, webpack
- Language: JavaScript
- Homepage:
- Size: 3.2 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# nuxt-svg-sprite-loader
Nuxt.js module for svg-sprite-loader.
## Install
```bash
# npm
$ npm install nuxt-svg-sprite-loader
# Yarn
$ yarn add nuxt-svg-sprite-loader
```
## Usage
Add the module to your Nuxt.js modules list in `nuxt.config.js`:
```js
export default {
...
modules: [
'nuxt-svg-sprite-loader'
]
}
```
Use an SVG in your page:
```vue
import Logo from '@/assets/logo.svg'
export default {
computed: {
Logo: () => Logo,
},
}
```
Or use it with JSX:
```vue
import Logo from '@/assets/logo.svg'
export default {
render() {
return <svg><use xlinkHref={`#\${Logo.id}`}></use></svg>
}
}
```
## Options
You 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.
Directly:
```js
export default {
...
modules: [
['nuxt-svg-sprite-loader', {
symbolId: 'foo-[name]'
}]
]
}
```
Top-level:
```js
export default {
...
modules: [
'nuxt-svg-sprite-loader'
],
spriteSvgLoader: {
symbolId: 'foo-[name]'
}
}
```
## Contribute
Are 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)! ⚙️
## Support
Hey, 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:
If you want to send me a one time donation. The coffee is pretty good 😊.
Also for one time donations if you like PayPal.
Here you can support me regularly, which is great so I can steadily work on projects.
Thanks a lot for your support! ❤️
## License
[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)