唷呼～各位看官們今天最後一天上班日，明天就要放中秋連假了，歡呼吧，各位！下班後要搭乘大眾運輸返鄉的，口罩戴好，一路平安，然後記得到威爾豬這邊逛逛，反正也不敢跟坐隔壁的小哥哥、小姐姐聊天 (誤)。好啦，廢話不多說，我們看下去。

設計除了版面外，還有很重要的 ICON，現在很多第三方網站都已把 ICON 做成 Webfont，方便工程師修改及使用，如 FontAwesome，威爾豬就很喜歡，但難免會遇到沒有適合的 ICON 來使用，或是專案必須設計師自行設計。

有厲害的設計師或工程師會將專案的 ICON 轉成自用的 Webfont 來使用，但這可能有些許難度，我想大部分的設計師應該是用切圖的方式給工程師，不過切圖之後要修改可能就比較麻煩；而另一種方式是由路徑組成的 SVG，它是屬於向量的一種，不像圖檔是點陣的，可能會有鋸齒邊，而且 SVG 相對來講也比圖檔來的小，威爾豬比較推薦使用。那我們來看看 SVG 該如何修改：

首先要判斷修改的 ICON 是屬於 fill (填滿) 還是 stroke (線段)。

Fill

使用 fill-current 來修改 ICON 顏色，記住 ICON 屬於文字的一種，要使用 text-{color}，不要用成 bg-{color} 了。看以下範例：

1. 先在 Class 設定 ICON 大小。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="none" class="w-5 h-5">
    <path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-18a8 8 0 1 0 0 16 4 4 0 1 1 0-8 4 4 0 1 0 0-8zm0 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0-8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</svg>

2. 接著我們在 Class 加上 fill-current 並加入我們要的文字顏色 text-yellow-500。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke="none" class="w-5 h-5 fill-current text-yellow-500">
    <path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-18a8 8 0 1 0 0 16 4 4 0 1 1 0-8 4 4 0 1 0 0-8zm0 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0-8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</svg>

噹噹～調整大小和顏色是不是輕輕鬆鬆。

Stroke

使用 stroke-current 來修改 ICON 線段顏色，當然也是要使用 text-{color}，不要用成 border-{color} 了。看以下範例：

1. 先設定 ICON 大小。

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>

2. 在 Class 上寫 stroke-current 並加入我們要的文字顏色 text-purple-600。

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 stroke-current text-purple-600">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>

3. 我們也可以修改線段粗細，在 path 上找到 stroke-width，將值修改想要的大小 (px)。如果有很多 path 想一起修改，先刪除 path 上的 stroke-width，然後在 SVG class 加上 stroke-{寬度}，Tailwind 預設只有 0-2。當然我們可以到設定檔 tailwind.config.js 的 theme.extend.strokeWidth 自行增加線段寬度。

   class	stroke-width

   stroke-0 | 0px
   stroke-1 | 1px
   stroke-2 | 2px

  // tailwind.config.js
  
  module.exports = {
    ...
    theme: {
      ...
      extend: {
        strokeWidth: {
         '3': '3',
         '4': '4',
        },
        ...
      }
    },
    ...
  }

我們把上面的例子線段粗細改成 3px：

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 stroke-current text-purple-600 stroke-3">
    <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
</svg>

噹噹～線段粗細和顏色也可輕鬆搞定。

在做 ICON 時，除了威爾豬前面提到的使用 Webfont 以及設計師自己畫的之外，Tailwind 和 Bootstrap 一樣，也有另外提供免費的 SVG icon 供我們使用，Tailwind 所使用的 Heroicons 還有額外提供 Figma File 供設計師認養，大大減少設計師的負擔。要注意的是 Heroicons 預設的 Fill icon 尺寸是 20 x 20 (px)，而 Stroke icon 尺寸是 24 x 24 (px)，線段寬度為 2 (px)。

如果設計師會用到一些背景花紋，也可以到 Hero patterns 看看有沒有適合的，這是背景用的 SVG，威爾豬也試做了一個讓同學們參考看看，這是 DEMO。

以上就是今天的內容，咱們明天見。