WPF 使用 SVG圖標技巧

概要說明

　　開發過程中，很多時候都要用到一些圖標。

　　我最常用的圖標庫是阿里的：www.iconfont.cn

使用方法如下：

　　1、搜索相關圖標，並點擊下載，如下圖：

　　2、點擊復制SVG代碼：

 

 　　3、粘貼到文本文檔：

<svg t="1615047957373" class="icon" viewBox="0 0 1024 1024" version="1.1"
    xmlns="http://www.w3.org/2000/svg" p-id="15273" width="32" height="32">
    <path d="M640 672H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h256c17.7 0 32 14.3 32 32s-14.3 32-32 32z" p-id="15274"></path>
</svg>

　　4、扣出相關path里面的d值

M640 672H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h256c17.7 0 32 14.3 32 32s-14.3 32-32 32z

　　5、復制d值，在窗體xaml里面相關位置加入<Path 給里面的Data屬性賦於d值

<Path Fill="Black" Data="M640 672H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h256c17.7 0 32 14.3 32 32s-14.3 32-32 32z"/>

 多個path的方法

 有時候拷貝下來的SVG，包含兩個或多個文件，如下圖：

 如果使用多個Path，調整起來會明顯比較麻煩，解決辦法如下：

• 　　拷貝相關path 的d值都放到PathFigureCollection里面，如下圖：

<Path  DockPanel.Dock="Right"  Fill="Gray">
    <Path.Data>
        <PathGeometry >
            <PathGeometry.Figures>
                <PathFigureCollection>
                    M647.52 170.666667a106.933333 106.933333 0 0 1 92.373333 53.333333l135.52 234.666667a106.986667 106.986667 0 0 1 0 106.666666l-135.52 234.666667a106.933333 106.933333 0 0 1-92.373333 53.333333H376.48a106.933333 106.933333 0 0 1-92.373333-53.333333l-135.52-234.666667a106.986667 106.986667 0 0 1 0-106.666666l135.52-234.666667a106.933333 106.933333 0 0 1 92.373333-53.333333h271.04m0-64H376.48a170.666667 170.666667 0 0 0-147.786667 85.333333L93.173333 426.666667a170.666667 170.666667 0 0 0 0 170.666666l135.52 234.666667a170.666667 170.666667 0 0 0 147.786667 85.333333h271.04a170.666667 170.666667 0 0 0 147.786667-85.333333l135.52-234.666667a170.666667 170.666667 0 0 0 0-170.666666l-135.52-234.666667a170.666667 170.666667 0 0 0-147.786667-85.333333z
                    M512 386.4a128 128 0 1 1-128 128 128 128 0 0 1 128-128m0-64a192 192 0 1 0 192 192 192 192 0 0 0-192-192z
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>