npmpackage.info

Gathering detailed insights and metrics for vite-svg-loader

Other packages similar to vite-svg-loader

@gkatsanos/vite-svg-loader

1.3.1

A Vite loader to manage SVG files

vite-plugin-istanbul

6.0.2

vite-plugin-istanbul ========================== [![Codacy grade](https://img.shields.io/codacy/grade/a0c628b128c044269faefc1da74382f7?style=for-the-badge&logo=codacy)](https://www.codacy.com/gh/iFaxity/vite-plugin-istanbul/dashboard) [![npm (scoped)](http

vite-plugin-graphql-loader

4.0.4

A Vite plugin for loading GraphQL files.

file-loader

6.2.0

A file loader module for webpack

Gathering detailed insights and metrics for vite-svg-loader

vite-svg-loader

Vite plugin to load SVG files as Vue components

5.1.0

598

MIT

JavaScript

17,227,612 2.7

Installations

npm install vite-svg-loader

Pull Requests

Open

7

Total

45

Closed

11

Merged

27

Issues

Open

20

Total

107

Closed

87

Releases

5.1.0

Published on 20 Nov 2023

5.0.1

Published on 17 Nov 2023

5.0.0

Published on 17 Nov 2023

4.1.0

Published on 18 May 2023

4.0.0

Published on 24 Dec 2022

3.6.0

Published on 07 Sept 2022

View all 30 releases

Developer

jpkleemans

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

Yes

Node Version

20.9.0

NPM Version

10.1.0 Statistics

598 Stars

229 Commits

60 Forks

8 Watching

2 Branches

18 Contributors

Updated on 27 Nov 2024

Languages

JavaScript (41.3%)

Vue (22.41%)

CSS (15.54%)

Shell (10.63%)

TypeScript (5.7%)

HTML (4.41%)

Total Downloads

Cumulative downloads

Total Downloads

17,227,612

Last day

-0.4%

56,182

Compared to previous day

Last week

-1.3%

288,231

Compared to previous week

Last month

14.1%

1,223,894

Compared to previous month

Last year

105%

10,635,824

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

Vite SVG loader

Vite plugin to load SVG files as Vue components, using SVGO for optimization.

1<template>
2  <MyIcon />
3</template>
4
5<script setup>
6import MyIcon from './my-icon.svg'
7</script>

Install

1npm install vite-svg-loader --save-dev

Setup

`vite.config.js`

1import svgLoader from 'vite-svg-loader'
2
3export default defineConfig({
4  plugins: [vue(), svgLoader()]
5})

Import params

URL

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

1import iconUrl from './my-icon.svg?url'
2// 'data:image/svg+xml...'

Raw

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

1import iconRaw from './my-icon.svg?raw'
2// '<?xml version="1.0"?>...'

Component

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

1import IconComponent from './my-icon.svg?component'
2// <IconComponent />

Default import config

When no explicit params are provided SVGs will be imported as Vue components by default. This can be changed using the defaultImport config setting, such that SVGs without params will be imported as URLs (or raw strings) instead.

`vite.config.js`

1svgLoader({
2  defaultImport: 'url' // or 'raw'
3})

SVGO Configuration

`vite.config.js`

1svgLoader({
2  svgoConfig: {
3    multipass: true
4  }
5})

Disable SVGO

`vite.config.js`

1svgLoader({
2  svgo: false
3})

Skip SVGO for a single file

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

1import IconWithoutOptimizer from './my-icon.svg?skipsvgo'
2// <IconWithoutOptimizer />

Use with TypeScript

If you use the loader in a Typescript project, you'll need to reference the type definitions inside vite-env.d.ts:

1/// <reference types="vite/client" />
2/// <reference types="vite-svg-loader" />

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:7: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/e2e.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/e2e.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/jpkleemans/vite-svg-loader/e2e.yml/main?enable=pin
Warn: npmCommand not pinned by hash: create-test-app.sh:22
Warn: npmCommand not pinned by hash: create-test-app.sh:23
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vite-svg-loader

Other packages similar to vite-svg-loader

vite-svg-loader

Installations

Pull Requests

7

45

11

27

Issues

20

107

87

Releases

Developer

jpkleemans

Developer Guide

CommonJS

Yes

20.9.0

10.1.0

Statistics

Languages

Total Downloads

17,227,612

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Vite SVG loader

Install

Setup

vite.config.js

Import params

URL

Raw

Component

Default import config

vite.config.js

SVGO Configuration

vite.config.js

Disable SVGO

vite.config.js

Skip SVGO for a single file

Use with TypeScript

Sponsors

10

10

10

2

0

0

0

0

0

0

0

0

0

2.7

/10

`vite.config.js`

`vite.config.js`

`vite.config.js`

`vite.config.js`