Installation
How to install and use exaBase Design System Icons.
Embedded
The quickest way to use icons is to copy the SVG code of the icon you need and inline it directly into your HTML. You can get the SVG code by clicking on the icon on the Icons page.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="#000000">
<path d="M16.0001 28C16.2653 28 16.5196 27.8946 16.7072 27.7071L27.7102 16.7041C28.1007 16.3136 28.1007 15.6804 27.7102 15.2899C27.3196 14.8994 26.6865 14.8994 26.2959 15.2899L17.0001 24.5858L17.0001 5C17.0001 4.44772 16.5523 4 16.0001 4C15.4478 4 15.0001 4.44772 15.0001 5L15.0001 24.5858L5.70418 15.2899C5.31365 14.8994 4.68049 14.8994 4.28996 15.2899C3.89944 15.6804 3.89944 16.3136 4.28996 16.7041L15.2929 27.7071C15.4805 27.8946 15.7348 28 16.0001 28Z"/>
</svg>The size can be changed with the width and height attributes, and the color can be changed with the fill attribute.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="#1400c8">
<path d="M16.0001 28C16.2653 28 16.5196 27.8946 16.7072 27.7071L27.7102 16.7041C28.1007 16.3136 28.1007 15.6804 27.7102 15.2899C27.3196 14.8994 26.6865 14.8994 26.2959 15.2899L17.0001 24.5858L17.0001 5C17.0001 4.44772 16.5523 4 16.0001 4C15.4478 4 15.0001 4.44772 15.0001 5L15.0001 24.5858L5.70418 15.2899C5.31365 14.8994 4.68049 14.8994 4.28996 15.2899C3.89944 15.6804 3.89944 16.3136 4.28996 16.7041L15.2929 27.7071C15.4805 27.8946 15.7348 28 16.0001 28Z"/>
</svg>React
Install react version icons from npm:
npm i @exawizards/exabase-design-system-icons-reactThen import the icon you want to use in your React component:
import { CheckmarkCircleIcon } from "@exawizards/exabase-design-system-icons-react"
function MyComponent() {
return (
<CheckmarkCircleIcon />
)
}Props
| Prop | Type | Default | Note |
|---|---|---|---|
size | number | 16 | Set icon height and size. |
title | string | undefined | Insert a title element into the svg, and remove the aria-hidden="true" from the svg. |
titleId | string | undefined | Add an id attribute to the title element, and add an aria-labelledby={titleId} attribute. |
More details: @exawizards/exabase-design-system-icons-react
Icon font
Install icon fonts and CSS files from npm:
npm i @exawizards/exabase-design-system-iconsOr install from CDN:
https://cdn.jsdelivr.net/npm/@exawizards/exabase-design-system-icons/font/exabase-design-system-icons.cssThen import CSS to your Javascript file:
import "@exawizards/exabase-design-system-icons/font/exabase-design-system-icons.css"After import, copy and paste the HTML code for the icon you want into your HTML. You can get the HTML code by clicking on the icons on the Icons page.
<i class="ei ei-bookmark-fill"></i>Size and color can be changed by font-size and color with custom CSS.
<i class="ei ei-bookmark-fill" style="font-size: 16px; color: #1400c8;"></i>