1 | # `@vtmn/icons`
|
2 |
|
3 | > Decathlon Design System - Vitamin icons library
|
4 |
|
5 | <a href="https://www.decathlon.design/726f8c765/p/91dc94-iconography"><img src="https://img.shields.io/badge/decathlon.design-docs-007dbc" alt="documentation" /></a>
|
6 | <a href="https://decathlon.github.io/vitamin-web/@vtmn/showcase-icons"><img src="https://img.shields.io/badge/storybook-icons-295573?style=flat&logo=storybook" alt="storybook" /></a>
|
7 | <a href="https://www.npmjs.com/package/@vtmn/icons"><img src="https://img.shields.io/npm/v/@vtmn/icons?style=flat&logo=npm" alt="npm version" /></a>
|
8 | <a href="https://sonarcloud.io/dashboard?id=decathlon_vitamin-web_icons"><img src="https://sonarcloud.io/api/project_badges/measure?project=decathlon_vitamin-web_icons&metric=alert_status" alt="Quality Gate Status" /></a>
|
9 |
|
10 | ## Install package
|
11 |
|
12 | After installing [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [yarn](https://yarnpkg.com/en/docs/install), you can install `@vtmn/icons` with this command:
|
13 |
|
14 | ```sh
|
15 | # with npm
|
16 | npm i -S @vtmn/icons
|
17 |
|
18 | # with yarn
|
19 | yarn add @vtmn/icons
|
20 | ```
|
21 |
|
22 | Or you can also install it with a CDN like `unpkg.com`. You can browse content [here](https://unpkg.com/@vtmn/icons/).
|
23 |
|
24 | ## Usage
|
25 |
|
26 | Once you have installed this package, depending on your setup, you can include `@vtmn/icons` in a handful of ways.
|
27 |
|
28 | - Reference via `<img>` element
|
29 | - Use the SVG sprite
|
30 | - Use the icon font
|
31 | - Include via CSS
|
32 | - Copy-paste SVGs as embedded HTML
|
33 |
|
34 | Vitamin icons gives you SVGs, so you can include them into your HTML in a few ways depending on how your project is setup.
|
35 | Our icons include a `width` and `height` of `16px` by default to allow for easy resizing via `font-size`.
|
36 |
|
37 | ### External image
|
38 |
|
39 | Reference Icons SVGs like normal images with the `<img>` element.
|
40 |
|
41 | ```html
|
42 | <img
|
43 | src="/node_modules/@vtmn/icons/dist/vitamix/svg/home-fill.svg"
|
44 | alt="Home icon filled"
|
45 | width="32"
|
46 | height="32"
|
47 | />
|
48 | ```
|
49 |
|
50 | ### Sprite
|
51 |
|
52 | 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.
|
53 |
|
54 | ```html
|
55 | <svg width="32" height="32" fill="#001018">
|
56 | <use
|
57 | xlink:href="/node_modules/@vtmn/icons/dist/vitamix/sprite/vitamix.svg#home-fill"
|
58 | />
|
59 | </svg>
|
60 | ```
|
61 |
|
62 | ### Icon font
|
63 |
|
64 | 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.
|
65 |
|
66 | Use `font-size` and `color` to change the icon appearance.
|
67 |
|
68 | If your icon is followed by a text:
|
69 |
|
70 | ```html
|
71 | <span aria-hidden="true" class="vtmx-home-fill"> </span> Homepage
|
72 | ```
|
73 |
|
74 | If your icon is alone:
|
75 |
|
76 | ```html
|
77 | <span aria-label="Homepage" class="vtmx-home-fill"> </span>
|
78 | ```
|
79 |
|
80 | ### CSS
|
81 |
|
82 | 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.
|
83 |
|
84 | The `viewBox` attribute is required if you wish to resize icons with `background-size`. Note that the `xmlns` attribute is required.
|
85 |
|
86 | ```css
|
87 | .your-class {
|
88 | content: '';
|
89 | 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");
|
90 | background-repeat: no-repeat;
|
91 | background-size: 1rem 1rem;
|
92 | }
|
93 | ```
|
94 |
|
95 | ### Embedded
|
96 |
|
97 | 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`.
|
98 |
|
99 | ```html
|
100 | <svg
|
101 | width="16"
|
102 | height="16"
|
103 | fill="#001018"
|
104 | viewBox="0 0 16 16"
|
105 | xmlns="http://www.w3.org/2000/svg"
|
106 | >
|
107 | <path
|
108 | d="M7.333 7.333v-4h1.334v4h4v1.334h-4v4H7.333v-4h-4V7.333h4z"
|
109 | fill="#001018"
|
110 | />
|
111 | </svg>
|
112 | ```
|
113 |
|
114 | ## Development
|
115 |
|
116 | To know all the use cases and their associated code, [check out the showcase here](https://decathlon.github.io/vitamin-web/@vtmn/showcase-icons).
|
117 |
|
118 | ## Changelog
|
119 |
|
120 | If you want to know the different changes between versions of this package, [look at the changelog here](https://github.com/Decathlon/vitamin-web/blob/main/packages/sources/icons/CHANGELOG.md).
|
121 |
|
122 | ## I have an issue, what should I do?
|
123 |
|
124 | Please file the issue [here](https://github.com/Decathlon/vitamin-web/issues/new).
|
125 |
|
126 | ## Contributing
|
127 |
|
128 | See [the contributing docs](https://github.com/Decathlon/vitamin-web/blob/main/CONTRIBUTING.md).
|
129 |
|
130 | ## License
|
131 |
|
132 | Vitamix Icons is the official Decathlon icon library based on the open-source icon library called [Remix Icon](https://remixicon.com/). This original library is under the license Apache 2.0 and has been modified by Decathlon. [Learn more](https://www.decathlon.design/726f8c765/p/76e6e0-vitamix-license).
|
133 |
|
134 | Apache-2.0 © [Decathlon](https://github.com/Decathlon)
|