npmpackage.info

svg-mixed-loader

Webpack loader resolving svg into url string and multiple component formats.

0.8.3

MIT

JavaScript

383.12 kB

11,515 2.7

Installations

npm install svg-mixed-loader

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

15.2.0

NPM Version

7.0.10 Score

55.1

Supply Chain

62.6

Quality

73.2

Maintenance

Vulnerability

98.6

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 3 contributors

Languages

JavaScript

JavaScript (100%)

Developer

ecomfe

Download Statistics

Total Downloads

11,515

Last Day

Last Week

Last Month

270

Last Year

3,178

GitHub Statistics

7 Stars

14 Commits

12 Watching

1 Branches

3 Contributors

Bundle Size

1.55 MB

Minified

383.12 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.8.3

Package Id

svg-mixed-loader@0.8.3

Unpacked Size

21.95 kB

Size

7.61 kB

File Count

NPM Version

7.0.10

Node Version

15.2.0

Total Downloads

Cumulative downloads

Total Downloads

11,515

Last day

Compared to previous day

Last week

-52%

Compared to previous week

Last month

15.4%

270

Compared to previous month

Last year

-12.5%

3,178

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

svg-mixed-loader

Webpack loader resolving svg into url string and multiple component formats.

Background

In community svg files are commonly used to introduce icons to web apps, in this case developers are tend to import and svg as a component:

1import IconPlus from './icon-plus.svg';
2
3const CreateButton = () => (
4    <Button>
5        <IconPlus />
6        Create New
7    </Button>
8);

Also, svg, when itself is a common image format, may used as an image:

1import logoURL from './logo.svg';
2
3const Header = () => (
4    <div style={{display: 'flex'}}>
5        <img width={180} height={30} src={logoURL} />
6        <div style={{flex: 1}}>
7            {/* navigation}*/}
8        </div>
9    </div>
10);

As these use cases are conflicting to each other, this loader sovles this by export multiple possible formats from an svg file.

Install

svg-mixed-loader requires url-loader and file-loader as peer dependencies.

1npm install -D svg-mixed-loader url-loader file-loader

Usage

1// webpack.config.js
2module.exports = {
3    module: {
4        rules: [
5            {
6                test: /\.svg$/,
7                use: [
8                    {
9                        loader: 'svg-mixed-loader',
10                        options: {
11                            // options
12                        },
13                    },
14                    // You may add other preprocess loaders like svgo-loader or img-loader here
15                ],
16            },
17        ],
18    },
19};

Output

This loader currently create a default export of image URL, and a named export ReactComponent as a react component.

1import React from 'react';
2
3export default 'data:image/svg;...';
4
5export const ReactComponent = props => React.createElement(/* ... */);
6ReactComponent.displayName = 'AutoResolvedComponentName';

Options

1{
2    // This option will be forwarded to url-loader, can set to false to disable generation of default export
3    url: {
4        limit: 1024,
5    },
6    // Can be:
7    //
8    // 1. true: generate react component as ReactComponent named export with default option
9    // 2. false: don't generate react component
10    // 3. object: customize react code generation, see below
11    //
12    // Default to false.
13    react: {
14        // Can be multiple formats:
15        //
16        // 1. true: auto resolve a component name from resource path
17        // 2. false: remove display name from output
18        // 3. string: a static display name
19        // 4. function: customize display by (resourcePath) => string
20        //
21        // Default to true.
22        displayName: true,
23    }
24}

By default svg-mixed-loader generates only default export, behaves exactly the same as url-loader, if ReactComponent named export is wanted, pass {react: true} as options is a quick solution.

No vulnerabilities found.

10

Binary-Artifacts

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

10

Dangerous-Workflow

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

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

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

0

SAST

Determines if the project uses static code analysis.

0

Token-Permissions

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

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

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

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

41 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh

Score

2.7

/10

Last Scanned on 2025-01-27

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 svg-mixed-loader

@ecomfe/svg-mixed-loader

1.0.1

Webpack loader resolving svg into url string and multiple component formats.

@reskript/svg-mixed-loader

1.15.3

Gathering detailed insights and metrics for svg-mixed-loader

svg-mixed-loader

Installations

Developer Guide

No

CommonJS

15.2.0

7.0.10

Score

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

ecomfe

Download Statistics

GitHub Statistics

Bundle Size

1.55 MB

383.12 kB

Maintainers

Package Meta Information

Total Downloads

11,515

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

svg-mixed-loader

Background

Install

Usage

Output

Options

10

10

10

3

0

0

0

0

0

0

0

0

0

2.7

/10

Other packages similar to svg-mixed-loader

Other packages similar to svg-mixed-loader