Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@cloudfour/simple-svg-placeholder
Advanced tools
A very simple placeholder image generator with zero dependencies. Returns a data URI (or raw SVG source) as a string for use in templates.
A very simple placeholder image generator with zero dependencies. Returns a data URI (or raw SVG source) as a string for use in templates.
The package is available to install via npm:
npm i --save @cloudfour/simple-svg-placeholder
Once installed, you may import and call the function to generate placeholder SVGs:
const simpleSvgPlaceholder = require('@cloudfour/simple-svg-placeholder');
const placeholder = simpleSvgPlaceholder(/* options */);
// => 'data:image/svg+xml;...'
simpleSvgPlaceholder()
simpleSvgPlaceholder({
width: 180,
height: 135
})
simpleSvgPlaceholder({
text: 'Hello world!'
})
simpleSvgPlaceholder({
bgColor: '#0F1C3F',
textColor: '#7FDBFF'
})
simpleSvgPlaceholder({
fontFamily: 'Georgia, serif',
fontWeight: 'normal'
})
{Number}
Defaults to 300
, the default width of SVG elements in most browsers.
{Number}
Defaults to 150
, the default height of SVG elements in most browsers.
{String}
The text to display. Defaults to the image dimensions.
{String}
The font to use for the text. For data URIs, this needs to be a system-installed font. Defaults to 'sans-serif'
.
{String}
Defaults to 'bold'
.
{Number}
Defaults to 20% of the shortest image dimension, rounded down.
{Number}
Adjustment applied to the dy
attribute of the text element so it will appear vertically centered. Defaults to 35% of the fontSize
.
{String}
The background color of the image. Defaults to #ddd
.
{String}
The color of the text. For transparency, use an rgba
or hsla
color value. Defaults to rgba(0,0,0,0.5)
.
{Boolean}
If true
, the function will return an encoded string for use as an img
element's src
value. If false
, the function will return the unencoded SVG source. Defaults to true
.
{String}
Defaults to utf8
, but if your source HTML document's character set is different, you may want to update this to match.
FAQs
A very simple placeholder image generator with zero dependencies. Returns a data URI (or raw SVG source) as a string for use in templates.
The npm package @cloudfour/simple-svg-placeholder receives a total of 4,122 weekly downloads. As such, @cloudfour/simple-svg-placeholder popularity was classified as popular.
We found that @cloudfour/simple-svg-placeholder 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.