1. 直接使用
像传统图片一样,将svg文件添加到工程中,文件的属性为"Content"
在xaml中作为Image的source直接引用
这种方式只能在uwp中使用。
以下重点介绍, 将svg作为字体使用的方式,这种方式既可以在wpf中使用也可以在uwp中使用。
2. 作为字体的方式
随着富文本发展,程序界面将图标作为字体使用的原因和好处都有很多,对于wpf和uwp的UI,除了传说中提升性能外,最直接的好处是使用图标可以像文本内容一样处理,对于支持动态主题的UI,不再因为不同颜色而需要多套不同颜色的图标资源。
(1)那么如何做:
如何从svg的文件得到字体文件:
一般程序员从美工得到的图标资源是svg文件,有很多在线工具可以将svg文件转为字体,这里推荐一款比较好用的https://icomoon.io/app/#/select
将转换好的结果下载下来,得到以下文件结构,
将fonts 文件夹下的 .ttf 文件添加到工程中,文件属性为"Content"
怎么使用字体文件:
在全局资源字典中声明为字体资源:
打开 “demo.html" 文件,会看到这样类似这样的项,最左边是图标的原型,下面是Unicode编码,这编码是该图标的唯一的标识。
在xaml中使用该图标
或者
如果在cs代码中使用这个标识时,需要这么写
那么相应的xaml就可以这样使用:
FontIcon是uwp才支持的标签, TextBlock和wpf中使用方式是一样的。
(2) 需要注意的问题:
并不是任何情况都需要将svg转为fonticon的,对于富彩色的,不需要和背景整合的图片资源,应该还是直接以svg的方式使用。
参考:
https://cloud.tencent.com/developer/article/1342012
https://www.cnblogs.com/mycing/p/5658355.html
Uwp fontICon
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.fonticon?view=winrt-19041
Seoge MDL2 icons