Icon Component

Overview

The icon-v1 component provides access to a comprehensive set of SVG icons.

Basic Usage

<icon-v1 name="check"></icon-v1>

Available Icons

DS One includes 50+ icons:

• check, close, open
• up, down, left, right
• search, delete, duplicate
• star, unstar
• see, unsee
• lock, unlock
• And many more…

Attributes

Attribute	Type	Default	Description
name	string	-	Icon name to display
size	string	'1em'	Icon size (CSS unit)

Sizing

<icon-v1 name="check" size="16px"></icon-v1>
<icon-v1 name="check" size="2em"></icon-v1>
<icon-v1 name="check" size="32px"></icon-v1>

With Colors

Icons inherit the current text color:

<span style="color: red;">
  <icon-v1 name="star"></icon-v1>
</span>

In Buttons

<button-v1 variant="primary">
  <icon-v1 name="check"></icon-v1>
  Save
</button-v1>

Icon List

Common icons include:

• Navigation: up, down, left, right
• Actions: check, close, plus, delete
• UI: search, star, lock, see
• Content: note, page, title, icon
• Layout: expand, collapse, minimize