Hướng dẫn chuyển file SVG thành web font icon

Rate this post

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.

 

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...
Git

18/12/2022

Xử lý lỗi Git không thể tiến hành merge do merge.renamelimit
Khi bạn tiến hành merge nhánh phụ vào nhánh chính hoặc lên nhánh production, có thể xung đột xảy ra...