@vtmn/icons

> Decathlon Design System - Vitamin icons library

Install package

After installing npm or yarn, you can install @vtmn/icons with this command:

``sh


with npm

npm i -S @vtmn/icons

with yarn

yarn add @vtmn/icons
`

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/icons in a handful of ways.

- Reference via element
- Use the SVG sprite
- Use the icon font
- Include via CSS
- Copy-paste SVGs as embedded HTML

Vitamin icons gives you SVGs, so you can include them into your HTML in a few ways depending on how your project is setup.
Our icons include a width and height of 16px by default to allow for easy resizing via font-size.

$3

Reference Icons SVGs like normal images with the element.

`html
src="/node_modules/@vtmn/icons/dist/vitamix/svg/home-fill.svg"
alt="Home icon filled"
width="32"
height="32"
/>
`

$3

Use the SVG sprite to insert any icon through the 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 element.

`html

xlink:href="/node_modules/@vtmn/icons/dist/vitamix/sprite/vitamix.svg#home-fill"
/>

`

$3

Icon fonts with classes for every icon are also included. Include the icon web fonts in your page via CSS (./node_modules/@vtmn/icons/dist/vitamix/font/vitamix.css), then reference the class names as needed (e.g. vtmx-home-fill for the home-fill icon) in your HTML.

Use font-size and color to change the icon appearance.

If your icon is followed by a text:

`html
Homepage
`

If your icon is alone:

`html

`

$3

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 , the icon will fill the available space.

The viewBox attribute is required if you wish to resize icons with background-size. Note that the xmlns attribute is required.

`css
.your-class {
content: '';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.333 7.333v-4h1.334v4h4v1.334h-4v4H7.333v-4h-4V7.333h4Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
`

$3

Embed your icons 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 alongside viewbox.

`html
width="16"
height="16"
fill="#001018"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
d="M7.333 7.333v-4h1.334v4h4v1.334h-4v4H7.333v-4h-4V7.333h4z"
fill="#001018"
/>

``

Development

To know all the use cases and their associated code, check out the showcase here.

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

Vitamix Icons is the official Decathlon icon library based on the open-source icon library called Remix Icon. This original library is under the license Apache 2.0 and has been modified by Decathlon. Learn more.

Apache-2.0 © Decathlon