1.先来看看官网
自定义图标有两种方式
可以通过 'image://url' 设置为图片
,其中 URL 为图片的链接,或者 dataURI。
URL 为图片链接例如:
'image://http://xxx.xxx.xxx/a/b.png'
URL 为 dataURI 例如:
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
可以通过 'path://' 将图标设置为任意的矢量路径
。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
2.图片的方式不用多说,来介绍下使用svg的方式
非常简单
前往iconfont复制想要图标的svg代码
得到的svg代码往往是多个path
如:
<svg t="1650946851546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10631" width="81" height="81"><path d="M504.939 387.55c4.557 0 9.114 0 13.671 0 0.318 0.157 0.625 0.408 0.956 0.452 6.038 0.802 12.128 1.319 18.113 2.415 15.408 2.818 29.512 8.984 42.553 17.55 8.902 5.845 17.217 12.442 24.037 20.719 3.582 4.347 7.24 8.657 10.49 13.252 5.62 7.943 9.932 16.6 13.466 25.688 4.969 12.772 7.402 26.033 8.176 39.627 0.239 4.189-0.138 8.425-0.439 12.625-0.349 4.861-0.565 9.772-1.472 14.543-2.535 13.351-6.907 26.073-13.565 38.002-7.259 13.004-16.55 24.265-27.741 34.063-6.36 5.569-13.249 10.334-20.591 14.432-13.915 7.765-28.76 12.787-44.639 14.608-1.868 0.215-3.714 0.612-5.571 0.922-6.914 0-13.828 0-20.742 0-0.318-0.157-0.623-0.404-0.956-0.453-5.717-0.837-11.537-1.234-17.136-2.555-11.395-2.688-22.315-6.761-32.549-12.571-8.832-5.015-17.045-10.91-24.394-17.87-4.56-4.317-8.703-9.128-12.663-14.018-8.641-10.672-15.089-22.6-19.616-35.583-3.724-10.676-6.242-21.639-6.645-32.908-0.295-8.239 0.19-16.548 0.935-24.771 0.497-5.468 1.974-10.862 3.177-16.251 2.557-11.46 7.528-21.98 13.493-31.954 6.804-11.38 15.451-21.313 25.545-29.987 7.469-6.413 15.582-11.797 24.29-16.341 7.52-3.922 15.391-6.994 23.561-9.19 8.122-2.182 16.369-3.817 24.834-3.997 0.48-0.007 0.952-0.293 1.427-0.451z" fill="#707070" p-id="10632"></path><path d="M817.704 536.406c-120.010 0-240.023 0-360.831 0 0-16.918 0-33.293 0-51.028 120.283 0 240.559 0 360.831 0 0 17.009 0 34.017 0 51.028z" fill="#707070" p-id="10633"></path><path d="M229.67 487.042c111.818 0 223.631 0 336.202 0 0 15.862 0 31.213 0 47.839-112.075 0-224.137 0-336.202 0 0-15.948 0-31.893 0-47.839z" fill="#707070" p-id="10634"></path></svg>
那么只需要使用;
分隔,格式为'path://...;path://...;path://...'
...
为每个path
的d
里的内容
3.示例:一个图-线的icon
legend: {
icon: 'path://M504.939 387.55c4.557 0 9.114 0 13.671 0 0.318 0.157 0.625 0.408 0.956 0.452 6.038 0.802 12.128 1.319 18.113 2.415 15.408 2.818 29.512 8.984 42.553 17.55 8.902 5.845 17.217 12.442 24.037 20.719 3.582 4.347 7.24 8.657 10.49 13.252 5.62 7.943 9.932 16.6 13.466 25.688 4.969 12.772 7.402 26.033 8.176 39.627 0.239 4.189-0.138 8.425-0.439 12.625-0.349 4.861-0.565 9.772-1.472 14.543-2.535 13.351-6.907 26.073-13.565 38.002-7.259 13.004-16.55 24.265-27.741 34.063-6.36 5.569-13.249 10.334-20.591 14.432-13.915 7.765-28.76 12.787-44.639 14.608-1.868 0.215-3.714 0.612-5.571 0.922-6.914 0-13.828 0-20.742 0-0.318-0.157-0.623-0.404-0.956-0.453-5.717-0.837-11.537-1.234-17.136-2.555-11.395-2.688-22.315-6.761-32.549-12.571-8.832-5.015-17.045-10.91-24.394-17.87-4.56-4.317-8.703-9.128-12.663-14.018-8.641-10.672-15.089-22.6-19.616-35.583-3.724-10.676-6.242-21.639-6.645-32.908-0.295-8.239 0.19-16.548 0.935-24.771 0.497-5.468 1.974-10.862 3.177-16.251 2.557-11.46 7.528-21.98 13.493-31.954 6.804-11.38 15.451-21.313 25.545-29.987 7.469-6.413 15.582-11.797 24.29-16.341 7.52-3.922 15.391-6.994 23.561-9.19 8.122-2.182 16.369-3.817 24.834-3.997 0.48-0.007 0.952-0.293 1.427-0.451z,path://M817.704 536.406c-120.010 0-240.023 0-360.831 0 0-16.918 0-33.293 0-51.028 120.283 0 240.559 0 360.831 0 0 17.009 0 34.017 0 51.028z;path://M229.67 487.042c111.818 0 223.631 0 336.202 0 0 15.862 0 31.213 0 47.839-112.075 0-224.137 0-336.202 0 0-15.948 0-31.893 0-47.839z',
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},