iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

初見 Tailwindcss系列 第 17

Day 17 - SVG 使用

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

設計除了版面外,還有很重要的 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>

https://ithelp.ithome.com.tw/upload/images/20210917/20141250IgqxJTYPqC.png

  1. 接著我們在 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>

https://ithelp.ithome.com.tw/upload/images/20210917/20141250W45x2nesD0.png

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

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>

https://ithelp.ithome.com.tw/upload/images/20210917/201412502RvVxpecpm.png

  1. 在 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>

https://ithelp.ithome.com.tw/upload/images/20210917/20141250YpDHr4LK8G.png

  1. 我們也可以修改線段粗細,在 path 上找到 stroke-width,將值修改想要的大小 (px)。如果有很多 path 想一起修改,先刪除 path 上的 stroke-width,然後在 SVG class 加上 stroke-{寬度},Tailwind 預設只有 0-2。當然我們可以到設定檔 tailwind.config.jstheme.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>

https://ithelp.ithome.com.tw/upload/images/20210917/20141250YAMKGH2cY6.png

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

在做 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

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


上一篇
Day-16 動畫效果 (二)
下一篇
Day 18 - Dark Mode 使用
系列文
初見 Tailwindcss30

尚未有邦友留言

立即登入留言