node/custom-node/custom-icon-with-svg

Example page

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

graph.addNode({
  x: 320,
  y: 120,
  width: 96,
  height: 96,
  markup: [
    {
      tagName: 'path',
      selector: 'eye1',
      groupSelector: 'eye',
      attrs: {
        d: 'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
      },
    },
    {
      tagName: 'path',
      selector: 'eye2',
      groupSelector: 'eye',
      attrs: {
        d: 'M71.606,48.678c5.422,0,9.833-6.644,9.833-14.811c0-8.165-4.411-14.809-9.833-14.809c-5.421,0-9.831,6.644-9.831,14.809C61.775,42.034,66.186,48.678,71.606,48.678z',
      },
    },
    {
      tagName: 'path',
      selector: 'lip',
      attrs: {
        d: 'M95.855,55.806c-0.6-0.605-1.516-0.77-2.285-0.4C81.232,61.29,65.125,64.53,48.214,64.53c-16.907,0-33.015-3.24-45.354-9.123c-0.77-0.367-1.688-0.205-2.284,0.4c-0.599,0.606-0.747,1.526-0.369,2.29c5.606,11.351,25.349,19.277,48.008,19.277c22.668,0,42.412-7.929,48.012-19.279C96.603,57.332,96.453,56.411,95.855,55.806z',
      },
    },
  ],
  attrs: {
    lip: {
      fill: '#E0A31A',
    },
    eye: {
      fill: '#730000',
    },
  },
})