Icon
Icons provide visual context for the content they surround.
Icons are powered by Feather.
Examples
import React from 'react';
import ReactDOM from 'react-dom';
import { Icon } from 'furl-components';
ReactDOM.render(
<Icon
name='bell'
width={32}
height={32}
stroke='#ff8c69'
/>,
document.getElementById('root')
);
API
Property | Description | Type | Default | ||
---|---|---|---|---|---|
name | icon name | string | |||
width | icon width | int/string | 24 | ||
height | icon height | int/string | 24 | ||
viewBox | icon view box | string | '0 0 24 24' | ||
fill | icon fill color | string | 'none' | ||
stroke | icon stroke color | string | 'currentColor' | ||
strokeWidth | icon stroke width | number | 2 | ||
strokeLinecap | icon stroke linecap | string | 'round' | ||
strokeLinejoin | icon stroke likejoin | string | 'round' |
Notes
- You can find a full list of all the available icon
name
values here. width
andheight
accept any valid CSS value, including CSS variables.viewBox
,fill
,stroke
,strokeWidth
andstrokeLinecap
accept any valid CSS value for each of these properties.