@vtmn/assets

@vtmn/assets

Decathlon Design System - Vitamin assets library

Install package

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.

Usage

Once you have installed this package, depending on your setup, you can include @vtmn/assets in a handful of ways.

• Reference via <img> element
• Use the SVG sprite
• Include via CSS
• Copy-paste SVGs as embedded HTML

Vitamin 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.

External image

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"
/>

Sprite

Use the SVG sprite to insert any icon through the <use> element. Use the icon’s filename as the fragment identifier (e.g., home-fill is #home-fill). SVG sprites allow you to reference an external file similar to an <img> element.

<svg width="32" height="32" fill="#001018">
  <use
    xlink:href="/node_modules/@vtmn/assets/dist/vitamix/sprite/vitamix.svg#home-fill"
  />
</svg>

CSS

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 {
  display: inline-block;
  content: '';
  vertical-align: -0.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path d="M7.3337.333v-4h1.334v4h4v1.334h-4v4h7.333v-4h-4v7.333h4z' fill='#001018'/></svg>');
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Embedded

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" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M7.333 7.333v-4h1.334v4h4v1.334h-4v4H7.333v-4h-4V7.333h4z"
    fill="#001018"
  />
</svg>

Changelog

If you want to know the different changes between versions of this package, look at the changelog here.

I have an issue, what should I do?

Please file the issue here.

Contributing

See the contributing docs.

License

Apache-2.0 © Decathlon