Trong các vấn đề làm việc với Sketch hay gặp, việc convert file SVG để sử dụng như web font icon thường là vấn đề nhiều bạn gặp phải. Code Tốt xin chia sẻ các bước thực hiện công việc này.

Các bước thực hiện convert file SVG thành web font icon:

Bước 1: Mở file Sketch, lựa chọn icon bạn muốn convert.

Bước 2: Bạn copy (Cmd + C), sau đó tạo 1 page mới trong Sketch (Cmd + N), cuối cùng paste icon vào (Cmd + P).

Bước 3: Tạo Artboard mới (Insert > Artboard), sau đó chọn “New from selection” như trong hình. Lưu ý là để tạo được Artboard thì bạn vẫn đang chọn icon trước nhé. Phím tắt (A) khi đang chọn icon nhé.

Sau khi tạo Artboard xong, trông sẽ như thế này:

Bước 4: Format icon để đảm bảo khung vuông

Để Icon SVG có thể trở thành web font icon, bạn nên để nó nằm trong 1 viewBox là hình vuông (tức là khi view code của SVG bạn sẽ thấy: viewBox=”0 0 128 128″ chẳng hạn).

Hãy bắt đầu bằng cách bạn sửa lại size của Artboard ở màn hình bên phải để có width bằng nhau. Nhớ là click vào tên Artboard ở cột Layout bên trái nhé:

Lúc này icon sẽ nằm lệch. Bạn click vào icon và lựa chọn lần lượt các thứ tự cân giữa như trong hình:

Tiếp theo, bạn chỉnh size của icon theo ratio cho nó to lên bằng cách nhấp vào góc vuông của icon và kéo cho to lên. Lưu ý khoá ratio (bằng icon khoá) để đảm bảo không bị mất cân đối.

Một lưu ý khác là nhiều icon cần convert icon sang outline để tránh stroke làm hỏng icon. Cách làm như sau:

Bạn chọn icon và cho vào 1 group layer ở cột bên trái (thường ban đầu khi bạn copy nó đã là trong group rồi, cần ungroup và group lại cho chắc ăn).

Tìm menu Layer > Convert to Outline để thực hiện việc convert. Nếu menu này không sáng lên thì icon của bạn đã dùng Outline rồi.

Bước 5: Xuất icon ở định dạng SVG

Bước 6: Tối ưu hoá file SVG cho nó gọn nhẹ và không có các attribute thừa (như <title>):

Bạn vào SVGOMG để import file SVG và copy lại source sau khi đã improve. Lưu ý là bỏ cả title trong file SVG như trong hình nhé:

Bước 7: Import các web font icon bằng cách sử dụng ứng dụng IcoMoon App. Đọc bài viết hướng dẫn này. Như vậy bạn sẽ hoàn tất việc sử dụng web font icon từ file SVG trong Sketch.