Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
svg-inline-loader
Advanced tools
The svg-inline-loader npm package is a Webpack loader that inlines SVG files, allowing you to import SVGs directly into your JavaScript or TypeScript files. This can be useful for manipulating SVGs with JavaScript, applying styles, or optimizing SVGs for better performance.
Inline SVG Import
This feature allows you to import an SVG file directly into your JavaScript or TypeScript code. The SVG content is inlined, which means it is included directly in the JavaScript bundle, allowing for easier manipulation and styling.
const mySvg = require('svg-inline-loader!./path/to/my.svg');
SVG Optimization
By configuring Webpack to use svg-inline-loader for SVG files, you can ensure that all SVGs are inlined and optimized during the build process. This can help reduce the number of HTTP requests and improve performance.
module: { rules: [ { test: /\.svg$/, use: [ 'svg-inline-loader' ] } ] }
Custom Attributes
This feature allows you to customize the behavior of the loader, such as preserving or removing certain attributes from the SVG tags. This can be useful for maintaining specific SVG properties or optimizing the SVG content further.
module: { rules: [ { test: /\.svg$/, use: [ { loader: 'svg-inline-loader', options: { removeSVGTagAttrs: false } } ] } ] }
The svg-url-loader package is another Webpack loader that inlines SVGs, but it does so by converting them to data URLs. This can be useful for embedding SVGs directly in CSS or HTML. Compared to svg-inline-loader, svg-url-loader focuses more on converting SVGs to data URLs rather than inlining them directly in JavaScript.
The react-svg-loader package is designed specifically for React applications. It transforms SVGs into React components, allowing you to use SVGs as React components directly in your JSX. This is different from svg-inline-loader, which inlines SVGs into JavaScript without converting them to React components.
SVGR is a tool that transforms SVGs into React components, similar to react-svg-loader. It provides a CLI, webpack loader, and a Node.js API for converting SVGs to React components. SVGR offers more customization options and is more feature-rich compared to svg-inline-loader, which focuses on inlining SVGs into JavaScript.
This Webpack loader inlines SVG as module. If you use Adobe suite or Sketch to export SVGs, you will get auto-generated, unneeded crusts. This loader removes it for you, too.
npm install svg-inline-loader --save-dev
Simply add configuration object to module.loaders
like this.
{
test: /\.svg$/,
loader: 'svg-inline-loader'
}
warning: You should configure this loader only once via module.loaders
or require('!...')
. See #15 for detail.
removeTags: boolean
Removes specified tags and its children. You can specify tags by setting removingTags
query array.
default: removeTags: false
removingTags: [...string]
warning: this won't work unless you specify removeTags: true
default: removingTags: ['title', 'desc', 'defs', 'style']
warnTags: [...string]
warns about tags, ex: ['desc', 'defs', 'style']
default: warnTags: []
removeSVGTagAttrs: boolean
Removes width
and height
attributes from <svg />
.
default: removeSVGTagAttrs: true
removingTagAttrs: [...string]
Removes attributes from inside the <svg />
.
default: removingTagAttrs: []
warnTagAttrs: [...string]
Warns to console about attributes from inside the <svg />
.
default: warnTagAttrs: []
classPrefix: boolean || string
Adds a prefix to class names to avoid collision across svg files.
default: classPrefix: false
idPrefix: boolean || string
Adds a prefix to ids to avoid collision across svg files.
default: idPrefix: false
// Using default hashed prefix (__[hash:base64:7]__)
var logoTwo = require('svg-inline-loader?classPrefix!./logo_two.svg');
// Using custom string
var logoOne = require('svg-inline-loader?classPrefix=my-prefix-!./logo_one.svg');
// Using custom string and hash
var logoThree = require('svg-inline-loader?classPrefix=__prefix-[sha512:hash:hex:5]__!./logo_three.svg');
See loader-utils for hash options.
Preferred usage is via a module.loaders
:
{
test: /\.svg$/,
loader: 'svg-inline-loader?classPrefix'
}
Juho Vepsäläinen |
Joshua Wiens |
Kees Kluskens |
Sean Larkin |
FAQs
Cleans up and inlines your SVG files into Webpack module.
We found that svg-inline-loader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.