For graph analysis applications, icons can distinguish the types of nodes, which are both beautiful and practical. In the development process, the semantic expression is better. Compared with pictures, its biggest advantage is that there are fewer network requests and only need to load the font file once.
import React from 'react';import Graphin from '@antv/graphin';// Import resource fileimport iconLoader from '@antv/graphin-icons';import '@antv/graphin-icons/dist/index.css';// Register in Graphinconst { fontFamily, glyphs } = iconLoader();const icons = Graphin.registerFontFamily(iconLoader);// Use the iconsconst data = {nodes: [{id: 'node-1',style: {icon: {type: 'font', // Assign the icon as a 'font' typefontFamily: fontFamily, // Assign 'fontFamily' valuevalue: icons.home, // Assign the value of the icon},},},],};export default () => {return <Graphin data={data} />;};
This is the icon officially provided by Graphin. You can
right-click the menu and select Copythe selected icon name. Because the font icon file is relatively large, we use an unpacking mechanism, and users can import'@antv/graphin-icons' as needed