@planview/pv-icons-sprite

@planview/pv-icons-sprite

An svg sprite of Planview Design System Icons following the specification

Open the official documentation for more details

Intended Use

This package is intended for use with non-React implementations. For applications leveraging React, please use our @planview/pv-icons package.

Setup

You can install @planview/pv-icons-sprite in multiple ways:

• With NPM

npm install @planview/pv-icons-sprite --save

• With Yarn

yarn add @planview/pv-icons-sprite

Usage

Include the @planview/pv-icons-sprite/icons.svg SVG inline in your page using your preferred method.

Reference any of the icons in the sprite using <use /> and set the color with color in CSS. (Inline styles are used here for brevity of the example, but normal classes would work just fine.)

<svg style="width: 24px; height: 24px;">
    <use xlink:href="#icon-calculator"></use>
</svg>

<svg style="width: 24px; height: 24px; color: red">
    <use xlink:href="#icon-arrow-up"></use>
</svg>