Nouveau Papier Mâché

    @vtmn/icons

    0.14.0 • Public • Published

    @vtmn/icons

    Decathlon Design System - Vitamin icons library

    documentation storybook npm version Quality Gate Status

    Install package

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

    # 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 <img> 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.

    External image

    Reference Icons SVGs like normal images with the <img> element.

    <img
      src="/node_modules/@vtmn/icons/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/icons/dist/vitamix/sprite/vitamix.svg#home-fill"
      />
    </svg>

    Icon font

    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:

    <span aria-hidden="true" class="vtmx-home-fill"> </span> Homepage

    If your icon is alone:

    <span aria-label="Homepage" class="vtmx-home-fill"> </span>

    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 icons with background-size. Note that the xmlns attribute is required.

    .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;
    }

    Embedded

    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.

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

    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

    Install

    npm i @vtmn/icons

    DownloadsWeekly Downloads

    9,855

    Version

    0.14.0

    License

    Apache-2.0

    Unpacked Size

    1 MB

    Total Files

    420

    Last publish

    Collaborators

    • ossdecathlon
    • lthieb05