Vev Help Center
Searchโ€ฆ
useIcon hook
Watches and returns information about an icon given its icon key. The icon key can be created/found in the widgetโ€™s manifest file.
For SVG icons the following information is returned:
  • width - the width of the SVG viewbox
  • height - the height of the SVG viewbox
  • path - the SVG path to render the icon

Usage

1
const iconInfo: [ number, number, string | string[] ] = useIcon( iconKey: string );
Copied!

Example

Render an icon
1
import { useIcon } from 'vev';
2
โ€‹
3
export default function() {
4
const [width, height, ...path] = useIcon('smiley-icon');
5
โ€‹
6
return (
7
<svg viewBox={`0 0 ${width} ${height}`}>
8
{path.map((d,index) => <path key={index} d={d} />)}
9
</svg>
10
);
11
}
Copied!
Last modified 2mo ago
Copy link
Contents
Usage
Example