Gathering detailed insights and metrics for svg-mixed-loader
Installations
npm install svg-mixed-loaderDeveloper 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
50
Vulnerability
98.6
License
Releases
Unable to fetch releases
Contributors
3
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Developer
ecomfe
Download Statistics
Total Downloads
11,515
Last Day
18
Last Week
47
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
Maintainers
1
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
17
NPM Version
7.0.10
Node Version
15.2.0
Total Downloads
Cumulative downloads
Total Downloads
11,515
Last day
0%
18
Compared to previous day
Last week
-52%
47
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.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/svg-mixed-loader/ci.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/ecomfe/svg-mixed-loader/ci.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/14 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
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