antv x6 addtools 嵌入antd 图标

在使用ANTV X6的过程中，我们可以很方便地嵌入Ant Design（Antd）图标以增强视觉效果。ANTV X6是一个强大的图表库，而Ant Design是一个现代化且易于使用的UI组件库，它们的结合能够提供更加灵活和美观的可视化效果。

在使用ANTV X6时，我们可以通过引入Ant Design图标库来嵌入Antd图标。首先，我们需要在HTML中设置引入Ant Design的样式文件和脚本文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@4.0.0/dist/antd.min.css" />
<script src="https://cdn.jsdelivr.net/npm/antd@4.0.0/dist/antd.min.js"></script>

然后，在定义ANTV X6画布之前，我们可以调用Ant Design的`icons.add`方法来将所需的图标添加到ANTV X6的内置图标库中。例如，我们可以添加一个叫做"icon-star"的星星图标：

antv.icons.add('icon-star', { 
  width: 24,
  height: 24,
  d: 'M12 1.356l3.894 11.98 9.764.044-7.442 5.389 2.82 12.077L12 23.999l-8.036 6.856 2.82-12.077L.342 14.38l9.762-.044L12 1.356zm7.807 15.47l2.45 10.48L12 18.826l-8.258 7.48 2.45-10.48-6.5-5.646 14.314-.065L12 2.235l5.307 12.517 14.314.064-6.5 5.646z'
});

接下来，我们可以在ANTV X6的节点定义中使用这个图标，例如：

const shape = graph.createNode({
  shape: 'icon',
  x: 100,
  y: 50,
  width: 48,
  height: 48,
  className: 'icon-star' // 使用添加的图标类名
});

然后，我们可以在应用中使用Ant Design的其他组件来创建更加丰富和便捷的用户界面。通过这种方式，我们既可以享受ANTV X6图表库的强大功能，又能够借助Ant Design的美观组件和丰富图标来提升用户体验。