SVG icon with pure css

December 20, 2023 · 3 min read

Creator of Web totals

Cách cơ bản: Dùng svg qua thẻ img hoặc là dùng content của svg trong html
Cách tiếp cận tiếp theo là chuyển hết svg icon thành một bộ font rồi load bộ font,css đó vào source code, sử dùng bên html chỉ cần thêm class của icon.
- Cách này sẽ có nhược điêm là không convert được icon multilplechrome
Cách tiếp theo là chỉ cần chuyển svg thành dataURI rồi dùng trong css, bên html sẽ thêm class icon
- Cũng có một source họ dựng svg dùng với css css.gg nhưng bị giới hạn icon và cách họ xử lý cũng phức tạp.
HTML

Nếu chuyển sang URI thì đều chọn là base64. nhưng nhược điểm là sẽ nặng khi tải, thực tế base64 để encode data binary như ảnh sang base64 để dùng trong file text như css.
Với svg thực tế nó đã là text rồi vì thế mình không cần chuyển sang dạng base64 nữa, mn có thể đoc thêm về 2 bài này probably-dont-base64-svg, optimizing-svgs-in-data-uris
Có một cách khác để chuyển svg sang dataURI như sau

Về màu. với svg ta chỉ cần dùng fill=currentColor (svg currentcolor). Cách này svg sẽ fill theo màu của text, nhưng có một điểm là nếu ta dùng background thì màu sẽ không ăn với icon. Cũng có 1 bài xử lý vấn đề fill màu cho ảnh dùng css filter (solved-with-css-colorizing-svg-backgrounds) nhưng cần tính toán matrix để thay đổi màu. nó cũng khá phức tạp nếu dùng cách này. mình chỉ muốn dùng với css thuần.
- Có vẻ như đã không có cách nào nhưng đã có một bài nói về fill màu cho image dùng css coloring-svgs-in-css-background-images. bài viết nói về dùng css mask (css mask) thuộc tính mình còn chưa nghe đến trước đây

Như vậy vấn đề fill màu cho icon monochrome đã được giải quyết, còn icon multiplechorme thì sao.
Đơn giản mình chỉ cần check xem icon đó có phải là multiplechrome hay không thôi và giữ nguyên màu nếu là multiplechrome

SVG icon with pure css​