插入和扩展节点图标

插入图标

simple-mind-map内置了一些图标：

你可以通过如下方式获取：

import { nodeIconList } from 'simple-mind-map/src/svg/icons'

如果你使用的是umd格式的文件，可以通过如下方式获取（v0.5.8+）：

simpleMindMap.iconList

结构如下：

[
  {
    name: '优先级图标',
    type: 'priority',
    list: [
      {
        name: '1',
        icon: `<svg viewBox="0 0 1024 1024"><path d="M512.042667 1024C229.248 1024 0 794.794667 0 511.957333 0 229.205333 229.248 0 512.042667 0 794.752 0 1024 229.205333 1024 511.957333 1024 794.794667 794.752 1024 512.042667 1024z" fill="#E93B30"></path><path d="M580.309333 256h-75.52c-10.666667 29.824-30.165333 55.765333-58.709333 78.165333-28.416 22.314667-54.869333 37.418667-79.146667 45.397334v84.608a320 320 0 0 0 120.234667-70.698667v352.085333H580.266667V256z" fill="#FFFFFF"></path></svg>`
      }
    ]
  }
]

你可以通过UI界面展示出来，要给一个节点设置图标，可以使用node.setIcon([])方法，要获取节点当前的图标，可以使用node.getData('icon')方法。

一个图标由type_name构成，比如前面的图标要插入节点，那么图标的值为priority_1。

通常一个分组的图标只允许插入一个，所以存在一个替换的逻辑，完整示例如下：

扩展图标

v0.5.8+

除了使用内置的图标外，你也可以扩展图标，实例化simple-mind-map时传入你要扩展的图标列表即可：

new MindMap({
  // ...
  iconList: [
    {
      name: '',// 分组名称
      type: '',// 分组的值
      list: [// 分组下的图标列表
        {
          name: '',// 图标名称
          icon:''// 图标，可以传svg或图片
        }
      ]
    }
  ]
})

然后和插入内置图标一样，通过setIcon方法插入图标的key即可。

完整示例：

插入和扩展节点图标 ​

插入图标 ​

扩展图标 ​

插入和扩展节点图标

插入图标

扩展图标