Tạo SVG Sprite

Q: Icon của tôi ra màu đen thay vì màu gốc.

Đó là currentColor đang làm đúng việc của nó. Hãy tắt tuỳ chọn này với icon nhiều màu.

Gộp một đống icon SVG thành một file sprite gồm các phần tử <symbol>. Trên trang, bạn tham chiếu từng icon bằng thẻ <use> ba dòng thay vì phải tải hàng chục file riêng lẻ.

Vì sao nên dùng

Một request thay vì hàng chục. Ba mươi file icon gộp lại còn một.
Đổi màu bằng CSS. Khi bật currentColor, chỉ cần .icon { color: red } là đổi màu được mọi icon — không phải xuất lại file.
Không xung đột id. Hai icon xuất từ Figma rất hay cùng chứa <linearGradient id="a">. Gộp một cách ngây thơ thì icon thứ hai sẽ dùng nhầm gradient của icon thứ nhất. Công cụ này đặt tiền tố riêng cho mọi id bên trong từng icon trước, nên chuyện đó không thể xảy ra.

Các bước

Kéo thả các file .svg vào, hoặc dán thẳng mã SVG.
Đổi tên icon nào cũng được trong bảng — tên đó trở thành id của symbol (icon-arrow).
Đặt tiền tố id, và quyết định có dùng currentColor cùng nén gọn hay không.
Chọn cách bạn sẽ dùng:
- Nhúng thẳng — dán sprite một lần ở đầu <body>, tham chiếu bằng <use href="#icon-arrow">.
- File riêng — lưu sprite.svg cạnh các tài nguyên khác, tham chiếu bằng <use href="/sprite.svg#icon-arrow">.
Chép hoặc tải sprite về, rồi chép đoạn mã sử dụng.

Mẹo

Nhúng thẳng là lựa chọn an toàn hơn. File sprite riêng bị ràng buộc bởi CORS, và Safari đời cũ cần polyfill mới dùng được <use> liên file. Nếu sprite nhỏ, nhúng thẳng loại bỏ hẳn một nhóm vấn đề.
Hãy giữ phần tử sprite ở trạng thái ẩn (mặc định) — position:absolute;width:0;height:0 — nếu không các symbol thô sẽ chiếm chỗ trong bố cục.
currentColor chỉ hữu ích với icon một màu. Minh hoạ nhiều màu nên tắt tuỳ chọn này để giữ nguyên bảng màu.
Nhớ đặt width và height rõ ràng cho thẻ <svg> trong đoạn mã sử dụng, nếu không nó sẽ mặc định về 300×150.

Câu hỏi thường gặp

Icon của tôi ra màu đen thay vì màu gốc.

Đó là currentColor đang làm đúng việc của nó. Hãy tắt tuỳ chọn này với icon nhiều màu.

Một icon bị bỏ qua — vì sao?

Dòng cảnh báo có nêu tên icon đó. Nguyên nhân thường gặp là file SVG không có viewBox lẫn width/height dạng số, nên không có cách nào biết nó cần co giãn ra sao.

Tôi còn cần giữ từng file riêng không?

Không. Sprite sinh ra đã chứa đủ mọi thứ — nhưng hãy giữ file SVG gốc để còn tạo lại sprite khi thêm icon mới.

File của tôi có bị tải lên không?

Không — sprite được lắp ráp ngay trong trình duyệt bằng bộ phân tích DOM.

Hướng dẫn liên quan — SVG

Vì sao nên dùng

Một request thay vì hàng chục. Ba mươi file icon gộp lại còn một.

Đổi màu bằng CSS. Khi bật currentColor, chỉ cần .icon { color: red } là đổi màu được mọi icon — không phải xuất lại file.

Không xung đột id. Hai icon xuất từ Figma rất hay cùng chứa <linearGradient id="a">. Gộp một cách ngây thơ thì icon thứ hai sẽ dùng nhầm gradient của icon thứ nhất. Công cụ này đặt tiền tố riêng cho mọi id bên trong từng icon trước, nên chuyện đó không thể xảy ra.

Các bước

Kéo thả các file .svg vào, hoặc dán thẳng mã SVG.

Đổi tên icon nào cũng được trong bảng — tên đó trở thành id của symbol (icon-arrow).

Đặt tiền tố id, và quyết định có dùng currentColor cùng nén gọn hay không.

Chọn cách bạn sẽ dùng:

Nhúng thẳng — dán sprite một lần ở đầu <body>, tham chiếu bằng <use href="#icon-arrow">.
File riêng — lưu sprite.svg cạnh các tài nguyên khác, tham chiếu bằng <use href="/sprite.svg#icon-arrow">.

Chép hoặc tải sprite về, rồi chép đoạn mã sử dụng.

Mẹo

Nhúng thẳng là lựa chọn an toàn hơn. File sprite riêng bị ràng buộc bởi CORS, và Safari đời cũ cần polyfill mới dùng được <use> liên file. Nếu sprite nhỏ, nhúng thẳng loại bỏ hẳn một nhóm vấn đề.

Hãy giữ phần tử sprite ở trạng thái ẩn (mặc định) — position:absolute;width:0;height:0 — nếu không các symbol thô sẽ chiếm chỗ trong bố cục.

currentColor chỉ hữu ích với icon một màu. Minh hoạ nhiều màu nên tắt tuỳ chọn này để giữ nguyên bảng màu.

Nhớ đặt width và height rõ ràng cho thẻ <svg> trong đoạn mã sử dụng, nếu không nó sẽ mặc định về 300×150.