https://github.com/mini-ghost/nuxt-svgo-loader
Nuxt module to load SVG files as Vue components, using SVGO for optimization.
https://github.com/mini-ghost/nuxt-svgo-loader
nuxt nuxt-module svgo
Last synced: 11 months ago
JSON representation
Nuxt module to load SVG files as Vue components, using SVGO for optimization.
- Host: GitHub
- URL: https://github.com/mini-ghost/nuxt-svgo-loader
- Owner: Mini-ghost
- License: mit
- Created: 2023-12-13T07:02:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-09T05:58:10.000Z (about 1 year ago)
- Last Synced: 2025-05-08T23:48:38.917Z (11 months ago)
- Topics: nuxt, nuxt-module, svgo
- Language: TypeScript
- Homepage:
- Size: 1.38 MB
- Stars: 23
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Nuxt Svgo Loader
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Nuxt module to load SVG files as Vue components, using SVGO for optimization.
## Features
- 📁 Load SVG files as Vue components.
- 🎨 Optimize SVGs using SVGO.
- 🛠️ Seamless integration with Nuxt DevTools.
## Installation
Install and add nuxt-svgo-loader to your nuxt.config.
```bash
npx nuxi@latest module add nuxt-svgo-loader
```
```ts
export default defineNuxtConfig({
modules: ['nuxt-svgo-loader'],
svgoLoader: {
// Options here will be passed to `vite-svg-loader`
}
})
```
> [!NOTE]
> Since `nuxt-svgo-loader` is a Nuxt module based on `vite-svg-loader`, the configuration for `svgoLoader` remains identical to that of `vite-svg-loader`. You can refer to the documentation of `vite-svg-loader` for the available options [here](https://github.com/jpkleemans/vite-svg-loader?tab=readme-ov-file#vite-svg-loader).
## Usage
### Component
SVGs can be explicitly imported as Vue components using the `?component` suffix:
```ts
import NuxtSvg from '~/assets/svg/nuxt.svg'
//
```
### URL
SVGs can be imported as URLs using the `?url` suffix:
```ts
import nuxtSvgUrl from '~/assets/svg/nuxt.svg?url'
// nuxtSvgUrl === '/_nuxt/assets/svg/nuxt.svg'
```
### Raw
SVGs can be imported as raw strings using the `?raw` suffix:
```ts
import nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'
// nuxtSvgRaw === '
```
## DevTools
This module adds a new tab to the Nuxt DevTools, which allows you to inspect the SVG files.
## License
[MIT](./LICENSE) License © 2023-PRESENT [Alex Liu](https://github.com/Mini-ghost)
[npm-version-src]: https://img.shields.io/npm/v/nuxt-svgo-loader?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-svgo-loader
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-svgo-loader?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-svgo-loader
[license-src]: https://img.shields.io/npm/l/nuxt-svgo-loader.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-svgo-loader
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com