在網站上常常會使用到 icon 圖示做為點綴，而現今行動版普及化，響應式網站大多使用縮放都不會失真的 svg 向量圖檔，來獲得最佳的視覺體驗。網路有很多的插件內建 svg 圖示可以做為字型使用，例如 fontawesome 使用上就很方便快速，不過有時候想要自行定義圖示，或是只有用到少數的 icon，不想載入太大包檔案，這次要介紹的就是可以自行客製 icon 的 icoMoon

IcoMoon App 概述

5500 多個免費圖標
可以導出 SVG、PNG 等格式的圖標，IcoMoon 生成可與 use 標籤一起使用的內聯 SVG
導入客製的向量圖，生成圖標字體
IcoMoon 生成的代碼文件（HTML、CSS、JS）是 MIT 許可的，可免費使用
IcoMoon 應用程序中所做的幾乎所有事情都發生在本地。例如，當導入 SVG 圖像/字體或生成字體時，一切都發生在自己的瀏覽器中，不會上傳到 IcoMoon 的服務器

IcoMoon 教學

先進入 IcoMoon App

STEP 1.加入 icon

🔸 加入 IcoMoon 所提供的 icon
從 Icon Library 圖示庫可以加入你想要的圖示，Add 為免費直接加入，Purchase、Go Premium 需要升級購買

🔸 客製 icon
左上點擊 Import Icons，將 svg 圖檔匯入，如圖

STEP 2.選取要使用的 icon

將要使用的 icon 點選起來，選起來的圖示會自動變成一個 Selection

STEP 3.生成圖標字體或圖示，Download

你可以選擇使用 Generate Font 或 Generate SVG & More 其中一種

🔸 選取 Generate Font
產生圖標字體，Download 檔案後引入到自己的專案，即可使用裡面的 class，並用 font-size 就可以調整大小

1	<span class="icon-smile"></span>

點選圖示的 Get code，即可查看語法

🔸 選取 Generate SVG & More
也可以生成 svg 圖示，Download 檔案後引入到自己的專案，用繪製 svg 的方式顯示 icon

<svg class="icon icon-smile"><use xlink:href="#icon-smile"></use></svg>

<symbol id="icon-smile" viewBox="0 0 32 32">
<path d="M25.632 10.65c0 1.432-1.16 2.592-2.592 2.592s-2.592-1.16-2.592-2.592c0-1.432 1.16-2.592 2.592-2.592s2.592 1.16 2.592 2.592z"></path>
<path d="M11.955 10.65c0 1.432-1.16 2.592-2.592 2.592s-2.592-1.16-2.592-2.592c0-1.432 1.16-2.592 2.592-2.592s2.592 1.16 2.592 2.592z"></path>
<path d="M16.774 24.877c-8.429 0-15.008-6.022-15.11-6.112l1.312-1.402c0.55 0.512 13.619 12.416 26.022 0.026l1.357 1.357c-4.602 4.595-9.325 6.131-13.581 6.131z"></path>
</symbol>