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.
@vtmn/assets
Advanced tools
Readme
@vtmn/assets
Decathlon Design System - Vitamin assets library
After installing npm or yarn, you can install @vtmn/assets
with this command:
# with npm
npm i -S @vtmn/assets
# with yarn
yarn add @vtmn/assets
Or you can also install it with a CDN like unpkg.com
. You can browse content here.
Once you have installed this package, depending on your setup, you can include @vtmn/assets
in a handful of ways.
<img>
elementVitamin assets gives you SVGs, so you can include them into your HTML in a few ways depending on how your project is setup.
Our assets include a width
and height
of 16px
by default to allow for easy resizing via font-size
.
Reference assets SVGs like normal images with the <img>
element.
<img
src="/node_modules/@vtmn/assets/dist/vitamix/svg/home-fill.svg"
alt="Home icon filled"
width="32"
height="32"
/>
You can also use the SVG within your CSS (be sure to escape any characters, such as #
to %23
when specifying hex color values). When no dimensions are specified via width
and height
on the <svg>
, the icon will fill the available space.
The viewBox
attribute is required if you wish to resize assets with background-size
. Note that the xmlns
attribute is required.
.your-class {
content: '';
background-image: url("data:image/svg+xml,%3Csvg width='28' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.25' y='0.25' width='27.5' height='19.5' rx='1.75' fill='#fff' stroke='#f5f5f5' stroke-width='0.5'/%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='28' height='20'%3E%3Crect x='0.25' y='0.25' width='27.5' height='19.5' rx='1.75' fill='#fff' stroke='#fff' stroke-width='0.5'/%3E%3C/mask%3E%3Cg mask='url(#a)'%3E%3Cpath fill='#f44653' d='M18.6670h28v20h-9.333z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M020h9.333v0h0v20z' fill='#1035bb'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
Embed your assets within the HTML of your page (as opposed to an external image file, not really recommended). Here we’ve used a custom width
and height
.
<svg
width="16"
height="16"
fill="#001018"
viewbox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.333 7.333v-4h1.334v4h4v1.334h-4v4H7.333v-4h-4V7.333h4z"
fill="#001018"
/>
</svg>
If you want to know the different changes between versions of this package, look at the changelog here.
Please file the issue here.
Apache-2.0 © Decathlon
FAQs
Decathlon Design System - Vitamin assets library
The npm package @vtmn/assets receives a total of 16,654 weekly downloads. As such, @vtmn/assets popularity was classified as popular.
We found that @vtmn/assets demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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
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.