Using icons
Arc provides icons in multiple formats to suit varying project requirements.
Importing icons
There are currently two brands of icon sets in Arc. The import format is the same between the two, here is an example.
// BT example
import { BtIconInfo } from "@arc-ui/icons/BtIconInfo";
// EE example
import { EeIconChevronDown } from "@arc-ui/icons/EeIconChevronDown";
Note that each icon is imported individually. This is so you only include the icons that are needed by your project. You can import from the main bundle, and as they are named exports of strings, most bundlers should be able to tree shake any unused icons. Please ensure you monitor you're bundle sizes if importing this way, and notify a member of the Arc team if you notice unusually large bundles.
Using the Icon component
The arc icons are intended to be used with the icon component, which will allow you to set the color and size easily. All you need to do is pass the imported icon as a prop like so.
import { BtIconInfo } from "@arc-ui/icons/BtIconInfo";
import { Icon } from "@arc-ui/components/Icon";
<Icon icon={BtIconInfo} size={40} />;
Finding icons you can use
You can see all the available icons here. The name at the bottom of the icon is both the name of the React icon and the path to import it.
import { <the-icon-you-want> } from "@arc-ui/icons/<the-icon-you-want>";
For example:
import { BtIconCake } from "@arc-ui/icons/BtIconCake";
import { BtIconWiFi } from "@arc-ui/icons/BtIconWiFi";
import { BtIconInfo } from "@arc-ui/icons/BtIconInfo";
import { BtIconPhone } from "@arc-ui/icons/BtIconPhone";
import { BtIconLaptop } from "@arc-ui/icons/BtIconLaptop";
import { BtIconMobile } from "@arc-ui/icons/BtIconMobile";
Custom Icons
If you wish your own icons with the Icon component, there are numerous ways to do this. All the Icon component needs is a url for the svg you wish to use.
You can provide them as a data uri (This is the method the @arc-ui/icons package uses), or a url which can be resolved.
NextJs
import { Icon } from "@arc-ui/components/Icon";
import customSvg from "@/assets/custom.svg";
export default function Page() {
return <Icon size={40} icon={customSvg.src} />;
}
Data URI
You can use something like mini-svg-data-uri to make this process easier.
import svgToMiniDataURI from "mini-svg-data-uri";
import { Icon } from "@arc-ui/components/Icon";
const customSvg = `
<svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 32 32">
<circle cx="16" cy="16" r="16" fill="currentColor"></circle>
</svg>
`;
export default function Page() {
return <Icon size={40} icon={svgToMiniDataURI(customSvg)} />;
}
Webpack / Vite
Webpack doesn't support file imports out of the box, we recommend using file-loader.
There are other loaders you can choose from depending on your project needs,
import { Icon } from "@arc-ui/components/Icon";
import customSvg from "./custom.svg";
export default function Page() {
return <Icon size={40} icon={customSvg} />;
}
CSS
The icons are also available as CSS custom properties. To use them first import them into your project. Your bundler must be setup to handle css files (NextJs projects will work out of the box).
You can import them from @arc-ui/icons/lib/tokens-bt.css
Example icon
You can then reference them in your css files. To do so you will need apply them as mask images, here is an example
background-color: var(--colors-border-default);
display: block;
height: 40px;
mask-image: var(--bt-icon-info);
width: 40px;
SCSS
Using the SCSS icons is a similar process but the advantage over css custom properties, is that the variables wont be included in your final bundle.
You can import them from @arc-ui/icons/lib/tokens-bt.scss
background-color: $colors-border-default;
display: block;
height: 40px;
mask-image: $bt-icon-info;
width: 40px;