Custom icons using SVG

Hi all, chắc hẳn những bạn theo dõi blog này có thể thấy mình mới thêm cho blog một chức năng like bài viết mà không cần đăng nhập. Mình đã design một vài icon và trong quá trình thực hiện chức năng này, mình muốn viết bài hướng dẫn cách chúng ta custom file svg bằng CSS và đây là lí do bài viết này ra đời 😀. Cùng theo dõi bài viết này nhé ^^.

Đầu tiên chúng ta sẽ xem thử video demo nhé ^^.

Ở đoạn clip trên mình đã thực hiện hover và thêm hiệu ứng cho đôi mắt của trái tim ^^. Và khi click ta sẽ đổ gradient và chuyển trạng thái của trái tim thành happy. Mình sẽ hướng dẫn các bạn cách làm nhé.

Đầu tiên để sử dụng file svg một cách hiệu quả thì mình recommend các bạn tải extension này về, nó sẽ giúp các bạn preview, minify, pretty code SVG 👏.

Tiếp theo chúng ta cùng xem 1 file svg chứa những gì nhé:

Như các bạn đã thấy, mình đã tạo file svg này bằng illustrator, đặt tên cho các thành phần với id để dễ nhận biết như: mouth, glasses, eyes,... Các thành phần này được bao bọc bới thẻ <g>. Thẻ này như một container sẽ group các thành phần khác lại ^^.

Thẻ tiếp theo các bạn có thể thấy là <defs>. Thẻ này giúp chúng ta nhúng các định nghĩa có thể reused khi cần thiết. Các đối tượng được tạo bên trong <defs> sẽ không được hiển thị trực tiếp. Để hiển thị chúng, bạn phải tham chiếu đến chúng bằng cách sử dụng <use>.

Trong video mình đã thêm gradient bằng cách thêm các phần tử vào <defs>:

<defs>
  <linearGradient id="gradient" gradientTransform="rotate(90)">
    <stop offset="0" stop-color="#bc4e9c" />
    <stop offset="1" stop-color="#f80759" />
  </linearGradient>

  <clipPath id="heart-gradient">
    <rect
          x="0"
          y="0"
          style="
                 transform: rotate(180deg);
                 transform-origin: center;
                 "
          width="100%"
          height="0"
          fill="url(#gradient)"
          />
  </clipPath>
</defs>

Mình sử dụng <clipPath> để tạo một khối khác giống với hình trái tim đã tạo. các phần tử trong clipPath sẽ không thể vượt ra ngoài shape đã tạo. Bằng cách này ta sẽ tạo được gradient giống với khối đã tạo.

Trong file svg chúng ta không thể sử dụng z-index để xác định xem phần tử nào sẽ nằm trên phần tử nào. Với svg ta chỉ cần sắp xếp bằng cách phần tử được xếp càng dưới cùng sẽ nằm ở lớp cao nhất.

Với lý thuyết này mình sẽ sử dụng <use> và đặt nó vào vị trí mình muốn

<g id="shadow">
  ...                    
</g>
<use
     clip-path="url(#heart-gradient)"
     xlink:href="#heart-path-copy"
     fill="url(#gradient)"
     />

<g id="mouth">
  ...
</g>

Mình đã xếp phần gradient nằm giữa phần bóng và phần mouth. Các bạn xem video ở trên sẽ hiểu rõ hơn ^^.

Để sử dụng <clip-path> ta sẽ phải link tới một path đã tạo. Mình đã sử dụng path trong <g id="heart-shape">.

Phần Javascript khá đơn giản. Mình sẽ xử lí click khi click vào phần tử svg ta thêm điều kiện nếu chưa có class gradient thì ta sẽ tiến hành đổ gradient vào <clip-path> đã tạo từ trước.

Sau đây là kết quả:

Trên đây là một ví dụ để các bạn có thể hình dung cách chúng ta thêm các animation vào SVG mà các bạn muốn. Các bạn có thể tạo ra các icon đẹp khác và thêm chúng vào blog. Như vậy blog sẽ sinh động hơn đấy 😄.

Chúc các bạn học tốt ^^. Nếu thấy hay các bạn có thể click vào icon để thả tim nhé.

Cảm ơn các bạn đã dành thời gian đọc bài viết 🔥🎉.