
Research
Malicious npm Packages Impersonate Flashbots SDKs, Targeting Ethereum Wallet Credentials
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
gatsby-plugin-svg-sprites
Advanced tools
Gatsby plugin to generate SVG sprites from imported files
⚠️ If you are getting "sprites.[contenthash].svg" URLs in production, please check the "Known issues" section for possible solutions.
Gatsby plugin to generate SVG sprites from imported files. The sprites are generated using External SVG Sprite.
npm install gatsby-plugin-svg-sprites
/* gatsby-config.js */
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-svg-sprites'
options: {
/* gatsby-plugin-svg-sprites options here */
}
}
]
}
import React from 'react'
import icon from 'images/icon.svg'
export default () => (
<svg viewBox={icon.viewBox}>
<use xlinkHref={icon.url}/>
</svg>
)
.icon {
background-image: url('images/icon.svg') no-repeat 0;
}
Type: boolean
. Default: process.env.NODE_ENV === 'production'
.
Minify symbol ids, enabled if process.env.NODE_ENV === 'production'
by
default.
Type: Object
. Default: {}
.
The pluginOptions
parameter is passed to External SVG Sprite plugin.
Type: boolean
. Default: false
.
Allow this plugin to replace '[contenthash]'
placeholder in the name
property with a random hash.
Any other option passed to gatsby-plugin-svg-sprites
will be passed to
external-svg-sprite-loader
— more info about its options can be found
here. By default, this plugin will set the following options:
{
iconName: '[name]--[hash:base64:5]',
name: 'sprites.[contenthash].svg'
}
Note: if
minifyIds
is set totrue
,iconName
will be ignored.
There's an issue that affects some projects, where the underlying loader renders
the source content before the plugin processes the path strings — resulting in
SVG URLs like "sprites.[contenthash].svg", and thus 404 responses. There are two
ways to circumvent this issue: removing any webpack placeholder from the name
option — setting it to something like "sprites.svg"; or setting
randomContentHash
option to true
— it enables this plugin to replace the
"[contenthash]" placeholder in the name
property with random hashes. If you
are using Netlify or another service that implements HTTP ETags for cache
invalidation, you can safely use a plain filename like sprites.svg
. Otherwise,
enabling randomContentHash
could be a better choice.
FAQs
Gatsby plugin to generate SVG sprites from imported files
The npm package gatsby-plugin-svg-sprites receives a total of 346 weekly downloads. As such, gatsby-plugin-svg-sprites popularity was classified as not popular.
We found that gatsby-plugin-svg-sprites demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.