WPF使用IconFont中的Symbol图标

起因

这篇文章呢，本来是不应该出现的，起因是一位老铁看了之前的使用字体图标的文章 ，反馈说到自己使用IconFont的字体图标，无法在WPF中使用，于是跟着后面瞅了一眼，发现原来是这个样子的！

预览IconFont

首先呢，先去下载一下这个图标，这位老铁呢，看重的是这套彩色的图标SuperMap GIS产品彩色系功能图标库，收藏一下，然后打包下载。下载下来是一个压缩包，文件大概是这个样子：

IconFont很贴心的给我们提供了一个图标的预览，就是这个demo_index.html,双击打开这个html文件，可以看到：

里面呢是长这个样子的。其中

Unicode标签页下就是我们的字体图标的样子，我们引入文件目录中的iconfont.ttf，然后像之前文章中描述的，使用图标下方提供的编码就可以使用我们的字体图标了。

Font class标签页下和Unicode标签页下的内容一致，不过他里面是提供给网页使用的，引入对应的css，然后使用下方标注的类型名称就可以使用（这不在我们的讨论范围）。

可以看到上述的图标呢都是纯色的，默认给的是黑色，这里也强调下，字体图标就跟字体一样，没有过多的修饰，这里的矢量图标就是一种路径，他们没有过多的颜色描述，只能是纯色的。

重点来看下我们的Symbol标签页：

这里的图标就很丰富了，还自带各种颜色，我们查看一下网页源代码发现，他们是svg的图标，可以理解为是由多个图标组成的一种图标，不同图标有不同的颜色，最后变成这样多彩的图标，其实在WPF不会使用这种类型的图标，一般都是直接使用后缀是svg的文件，要么就是直接以PNG图片的形式进行下载，不过呢，为了理解这些图标的构成， 还是尝试在WPF中重现第一个图标吧。

在下载的文件中，可以发现这些svg的图标都保存在iconfont.js的文件中：

打开这个文件，可以看到很多的symbol标签，它们都有一个id与我们的界面中的id对应，然后此标签下还有很多的path节点，这每一个path对应的即使一个绘制路径：

稍微整理下，大概长下面这个样子：

可以看到图标有一个viewBox属性，值为0 0 1024 1024，然后下面有四个path路径，我们需要用到path路径的d属性和fill属性。

在WPF中还原svg图标

新建我们的项目，添加一个Viewbox节点和一个Canvas节点，然后设置一下Canvas的大小为1024 x 1024，将我们的窗口也设置一样的。然后拷贝上方的path节点下的d属性和fill属性，依次拷贝到WPF中Path节点中的Data属性和Fill属性，如下

运行我们的项目，就可以看到图片：

结束。
做个小科普， 水一篇，哈哈哈！