WPF使用IconFont中的Symbol图标

WPF使用IconFont中的Symbol图标

起因

这篇文章呢，本来是不应该出现的，起因是一位老铁看了之前的使用字体图标的文章WPF使用ttf字体图标 ，反馈说到自己使用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对应的即使一个绘制路径：

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

<symbol id="icon-yasuobingdantihua" viewBox="0 0 1024 1024">
	
	<path d="M96 96m32 0l768 0q32 0 32 32l0 768q0 32-32 32l-768 0q-32 0-32-32l0-768q0-32 32-32Z" fill="#FFFFFF" >
	</path>
	
	<path d="M608 608h288a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32h-288a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32z m0 32v256h288v-256h-288z m32-64h-32V320h-192v288h128v32H352v96h192v32H256v-32h64v-128h64V288h64V256h128v32h64v288z m-224-192h192v32h-192V384z m0 96h192v32h-192v-32z" fill="#808FA1" >
	</path>
	
	<path d="M736 736h96v96h-96v-96z m32 32v32h32v-32h-32z m-256 128v32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32v416h-32V128H128v768h384z" fill="#5D6D7E" >
	</path>
	
	<path d="M736 704v-96h96v96h-96z m128 32h64v96h-64v-96z m-32 128v64h-96v-64h96z m-128-32h-128v-96h128v96z" fill="#30AD98" >
	</path>

</symbol>

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

在WPF中还原svg图标

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

    <Viewbox>
        <Canvas
            Width="1024"
            Height="1024">

            <Path
                Data="M96 96m32 0l768 0q32 0 32 32l0 768q0 32-32 32l-768 0q-32 0-32-32l0-768q0-32 32-32Z"
                Fill="#FFFFFF" />
            <Path
                Data="M608 608h288a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32h-288a32 32 0 0 1-32-32v-256a32 32 0 0 1 32-32z m0 32v256h288v-256h-288z m32-64h-32V320h-192v288h128v32H352v96h192v32H256v-32h64v-128h64V288h64V256h128v32h64v288z m-224-192h192v32h-192V384z m0 96h192v32h-192v-32z"
                Fill="#808fa1" />
            <Path
                Data="M736 736h96v96h-96v-96z m32 32v32h32v-32h-32z m-256 128v32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32h768a32 32 0 0 1 32 32v416h-32V128H128v768h384z"
                Fill="#5d6d7e" />
            <Path
                Data="M736 704v-96h96v96h-96z m128 32h64v96h-64v-96z m-32 128v64h-96v-64h96z m-128-32h-128v-96h128v96z"
                Fill="#30ad98" />

        </Canvas>
    </Viewbox>

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

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