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>

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。

以上就是今天的内容，咱们明天见。