@stellaestudio/r2icon

Ready2order Design System - Foundation icons library

Install package

After installing npm or yarn, you can install @stellaestudio/r2icon with this command:

# with npm
npm i -S @stellaestudio/r2icon

# with yarn
yarn add @stellaestudio/r2icon

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 @stellaestudio/r2icon 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

Foundation 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/@stellaestudio/r2icon/dist/r2icon/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/@stellaestudio/r2icon/dist/r2icon/sprite/r2icon.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/@stellaestudio/r2icon/dist/r2icon/font/r2icon.css), then reference the class names as needed (e.g. r2icon-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="r2icon-home-fill"> </span> Homepage

If your icon is alone:

<span aria-label="Homepage" class="r2icon-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>