Icons

Icon Library

Monotone Icons

For icons with a single path, the fill is set to currentColor, allowing you to easily override the color via CSS.

Duotone Icons

For icons with multiple paths, the original fill colors are preserved, ensuring that the intended two-tone design is maintained.

Using the icons in code

To use an icon from the sprite, include the following in your HTML. We recommend using the BEM (Block Element Modifier) naming convention for consistency and clarity.

<svg class="bt1d-icon bt1d-icon--[icon-name]">
    <use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-[icon-name]"></use>
</svg>

Example HTML:

<svg class="bt1d-icon bt1d-icon--activity">
  <use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-activity"></use>
</svg>

Customizing Icon Appearance

You can customize the appearance of your icons using CSS. The BEM naming convention makes it easy to target specific icons or apply global styles to all icons.

Example CSS:

.bt1d-icon {
    width: 24px;
    height: 24px;
    fill: currentColor; /* For monotone icons */
}

.bt1d-icon--activity {
    color: #ff0000; /* Overrides the color for monotone icons */
}

Accessibility

SVG icons are accessible and can be made screen-reader friendly by including appropriate attributes. For example:

<svg class="bt1d-icon bt1d-icon--activity" role="img" aria-label="Activity">
  <use xlink:href="path/to/dist/svg/icons-sprite.svg#icon-activity"></use>
</svg>

• role="img": Defines the SVG as an image.
• aria-label: Provides a text label for screen readers.

Automated Processing and Sprite Generation

The SVG sprite is generated automatically using a custom script and stored in the dist/svg/icons-sprite.svg file. This process ensures that all icons are optimized and correctly processed based on their design (monotone or duotone).

See the Getting Start page for more information.

Advanced Usage

If you need to manipulate or style icons further, consider injecting the SVG markup directly into your HTML or using JavaScript for more dynamic control.