npmpackage.info

Gathering detailed insights and metrics for nuxt-svgo-loader

Other packages similar to nuxt-svgo-loader

vue-svg-inline-loader

2.1.5

Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.

nuxt-svgo-loader

Nuxt module to load SVG files as Vue components, using SVGO for optimization.

0.4.1

MIT

TypeScript

198.95 kB

35,556

Installations

npm install nuxt-svgo-loader

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.9.0

NPM Version

10.5.0 Score

47.1

Supply Chain

31.3

Quality

76.3

Maintenance

Vulnerability

97.9

License

Pull Requests

Open

0

Total

3

Closed

0

Merged

3

Issues

Open

1

Total

2

Closed

1

Releases

v0.4.1

Updated on Aug 25, 2024

v0.4.0

Updated on May 14, 2024

v0.3.0

Updated on Jan 01, 2024

v0.2.0

Updated on Dec 21, 2023

v0.1.0

Updated on Dec 18, 2023

v0.0.1

Updated on Dec 16, 2023

View All 6 releases

Contributors

Unable to fetch Contributors

View All 4 Contributors

Languages

TypeScript

Vue

JavaScript

TypeScript (54.23%)

Vue (45.32%)

JavaScript (0.45%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

Mini-ghost

Download Statistics

Total Downloads

35,556

Last Day

201

Last Week

985

Last Month

4,929

Last Year

34,811

GitHub Statistics

MIT License

22 Stars

28 Commits

3 Forks

1 Watchers

1 Branches

4 Contributors

Updated on Dec 02, 2024

Maintainers

Package Meta Information

Latest Version

0.4.1

Package Id

nuxt-svgo-loader@0.4.1

Unpacked Size

198.95 kB

Size

68.78 kB

File Count

NPM Version

10.5.0

Node Version

20.9.0

Published on

Aug 25, 2024

Total Downloads

Cumulative downloads

Total Downloads

35,556

Last Day

25.6%

201

Compared to previous day

Last Week

-9.8%

985

Compared to previous week

Last Month

32.8%

4,929

Compared to previous month

Last Year

4,572.6%

34,811

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@nuxt/devtools-kit @nuxt/kit birpc fast-glob pathe perfect-debounce scule sirv svgo vite-svg-loader

Dev Dependencies

@antfu/eslint-config @nuxt/module-builder @nuxt/schema @typescript-eslint/eslint-plugin bumpp eslint husky lint-staged nuxt typescript

Nuxt Svgo Loader

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.

1npx nuxi@latest module add nuxt-svgo-loader

1export default defineNuxtConfig({
2  modules: ['nuxt-svgo-loader'],
3  svgoLoader: {
4    // Options here will be passed to `vite-svg-loader`
5  }
6})

[!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.

Usage

Component

SVGs can be explicitly imported as Vue components using the ?component suffix:

1import NuxtSvg from '~/assets/svg/nuxt.svg'
2// <NuxtSvg />

URL

SVGs can be imported as URLs using the ?url suffix:

1import nuxtSvgUrl from '~/assets/svg/nuxt.svg?url'
2// nuxtSvgUrl === '/_nuxt/assets/svg/nuxt.svg'

Raw

SVGs can be imported as raw strings using the ?raw suffix:

1import nuxtSvgRaw from '~/assets/svg/nuxt.svg?raw'
2// nuxtSvgRaw === '<svg xmlns="http://www.w3.org/2000/svg" ...'

Skip SVGO for a single file

SVGO can be explicitly disabled for one file by adding the ?skipsvgo suffix:

1import NuxtSvgWithoutOptimizer from '~/assets/svg/nuxt.svg?skipsvgo'
2// <NuxtSvgWithoutOptimizer />

DevTools

This module adds a new tab to the Nuxt DevTools, which allows you to inspect the SVG files.

License

No vulnerabilities found.

No security vulnerabilities found.