Namespace for uniquely addressing this element.
Group name this icon should appear under in the IDE.
Optionaldescription?: stringOptional description text for this icon.
Will be shown in the IDE icon selector and can be used to improve discoverability through search.
The React component rendering the icon.
To include SVG icons, import them directly.
import icon from './myIcon.svg'
Human-readable name for this icon.
Will be shown in the IDE icon selector.
import CircleIcon from './Circle.svg';
const namespace = createNamespace({ name: 'foo.bar' });
const icon = createIcon(namespace, {
name: 'Circle',
description: 'A Roundish Shape',
category: 'My Extension Icons',
Icon: CircleIcon,
});
import CircleIconS from './CircleS.svg';
import CircleIconM from './CircleM.svg';
import CircleIconL from './CircleL.svg';
const namespace = createNamespace({ name: 'foo.bar' });
const icon = createIcon(namespace, {
name: 'Circle',
description: 'A Roundish Shape',
category: 'My Extension Icons',
Icon(props) {
switch (props.size) {
case 'S':
return <CircleIconS />;
case 'M':
return <CircleIconM />;
case 'L':
return <CircleIconL />;
}
},
});
Creates a HELIO icon.
Icons should be SVGs and included using
import.