Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
create-svg-icon-sprite
Advanced tools
Readme
This is a tool to:
It is used for TransferWise icons, but doesn't contain anything TransferWise-specific and is therefore suitable for other personal and enterprise uses.
How to use SVG icon sprites and what are the benefits - CSSTricks
npm install --save-dev create-svg-icon-sprite
buildReactModules
Builds a React component module named ${icon-name}.js
for every icon in the icons
directory and places them in react/
directory.
They can then be imported individually, allowing us to minimize our app sizes.
For example:
...
import TransferIcon from '@transferwise/icons/react/transfer';
const YourComponent = () => (
...
<TransferIcon size="sm" />
...
);
The icon class by default is icon
, but you can use the className
option on the build script to modify it, as so:
buildReactModules({ className: 'tw-icon' });
It also has a size
prop, which simply adds a modifier class with -
and the class name to the icon
(so if the class is tw-icon
, for size="sm"
, it will add tw-icon-sm
).
The component also passes any other className
and style
values to the icon, so you can style them further.
createSprite
Builds a sprite from all the icons in the icons
directory and places it in dist/sprite.svg
.
It can then be hosted wherever you choose and used via a simple request.
buildDemo
Builds a demo HTML in demo
directory.
It can then easily be pushed wherever you choose,
but GitHub pages using the gh-pages
CLI tool is recommended.
The demo has styles for different icon sizes which you could mimic, but choosing your own sizes is recommended.
Example demo (adding styles is possible)
buildSpriteScript
Builds an UMD script in dist/svg-icon-sprite.js
that exposes the SVG sprite code as a string,
e.g. '<?xml version="1.0" encoding="utf-8"?><svg ...></svg>'
.
The global property name is svgIconSprite
(so window.svgIconSprite
if used from a non-module context).
This script can be a part of your bundle if you wish to avoid an extra request or wish to get started as fast as possible (as it doesn't require you to set up hosting the sprite).
buildVersionScript
Builds an UMD script in dist/svg-icon-sprite-version.js
that exposes the version of the package as a string,
e.g. '1.2.2'
.
The global property name is svgIconSpriteVersion
.
This is useful when you decide to host your icon sprite (allows you to cache it separately!), but still maintain control over which version you use from your package.
npm test
.package.json
according to semver and add an item that a release will be based on to CHANGELOG.md
.package.json
.For features and bugs, feel free to add issues or contribute.
FAQs
Create SVG icon sprite
The npm package create-svg-icon-sprite receives a total of 8 weekly downloads. As such, create-svg-icon-sprite popularity was classified as not popular.
We found that create-svg-icon-sprite 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.