Thêm biểu tượng tùy chỉnh vào UIkit

3 tháng 0 39 8 phút đọc

Tìm hiểu cách mở rộng hệ thống biểu tượng của UIkit bằng cách thêm các biểu tượng SVG tùy chỉnh bằng JavaScript. Hướng dẫn chi tiết cách tối ưu mã SVG, sử dụng UIkit.icon.add() để tích hợp biểu tượng mới vào giao diện của bạn một cách trực quan và linh hoạt.

Mục lục

Thêm biểu tượng vào UIkit
Bước 1: Tìm và tối ưu biểu tượng SVG
Bước 2: Thêm biểu tượng vào UIkit
Gợi ý:

Thêm biểu tượng vào UIkit

Hệ thống biểu tượng mặc định của UIkit đã đủ dùng cho hầu hết giao diện đơn giản, tuy nhiên trong một số trường hợp bạn sẽ muốn thêm các biểu tượng riêng biệt để phù hợp với thương hiệu hoặc chức năng đặc thù. May mắn là UIkit hỗ trợ điều này rất tốt thông qua JavaScript.

Bước 1: Tìm và tối ưu biểu tượng SVG

Đầu tiên, bạn cần tìm biểu tượng SVG.

Sau khi tải về, bạn có thể nén SVG để tối ưu hóa dung lượng mã SVG trước khi sử dụng.

Bước 2: Thêm biểu tượng vào UIkit

Sau khi có mã SVG đã tối ưu, bạn có thể tích hợp biểu tượng vào UIkit bằng cú pháp sau trong tập tin JavaScript chính:

UIkit.icon.add('tên', 'mã svg');

Ví dụ mình khai báo một số biểu tượng.

UIkit.icon.add('review', '<svg width="20" height="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M18 26h8v2h-8zm0-4h12v2H18zm0-4h12v2H18z"/><path d="M20.5 11.2 16 2l-4.5 9.2-10.2 1.5 7.3 7.2L6.9 30l7.1-3.7V24l-4.4 2.3 1-6.1.2-1-.8-.8-4.4-4.3 6.1-.9 1.1-.2.4-.9L16 6.5l2.8 5.6.4.9 1.1.2 7.4 1.1.3-2z"/><path data-name="&lt;Transparent Rectangle&gt;" fill="none" d="M0 0h32v32H0z"/></svg>');
UIkit.icon.add('gift', '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 7.75h-1.4c.4-.48.65-1.08.65-1.75A2.75 2.75 0 0 0 16 3.25c-1.68 0-3.16.89-4 2.21a4.8 4.8 0 0 0-4-2.21A2.75 2.75 0 0 0 5.25 6c0 .67.25 1.27.65 1.75H4.5c-.69 0-1.25.56-1.25 1.25v2.5c0 .6.43 1.08 1 1.2v6.8c0 .69.56 1.25 1.25 1.25h13c.69 0 1.25-.56 1.25-1.25v-6.8c.57-.12 1-.6 1-1.2V9c0-.69-.56-1.25-1.25-1.25m-.25 3.5h-6.5v-2h6.5zM16 4.75a1.25 1.25 0 0 1 0 2.5h-3.16A3.26 3.26 0 0 1 16 4.75m-8 0a3.26 3.26 0 0 1 3.16 2.5H8a1.25 1.25 0 0 1 0-2.5m-3.25 4.5h6.5v2h-6.5zm1 3.5h5.5v6.5h-5.5zm12.5 6.5h-5.5v-6.5h5.5z" fill="#000"/></svg>');
UIkit.icon.add('flag', '<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M13 0Q5.7.1 3 1l-2 .8-.3.2H.6l-.3.3-.1.1-.2.2V49q0 .6.5.9t1 0T2 49V30.7l2.2-.7Q7 29 13 29c3.9 0 6.8 1 10.3 2S31 33 37 33c7 0 12.5-3.1 12.5-3.1l.5-.3V2.3l-1.5.8C47.7 3.6 43 6 37 6c-4.8 0-8.1-1.4-11.6-3-3.5-1.4-7.2-3-12.4-3m0 2c4.8 0 8 1.4 11.6 3C28 6.3 31.8 8 37 8c5.4 0 9.1-1.6 11-2.5v22.8c-.7.4-5 2.7-11 2.7s-9.7-1-13.2-2c-3.4-1-6.6-2-10.8-2a38 38 0 0 0-9.3 1l-1.7.6v-25L3.6 3Q5.8 2 13 2" transform="scale(5.12)" fill="#666" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal"/></svg>');
UIkit.icon.add('pin', '<svg width="20" height="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M31.71 11.86 20.21.3a1 1 0 0 0-1.67.4q-1.04 3.34-.24 6.1l-.14.1-5.35 5.35a13 13 0 0 0-5.42-1.23q-1.77 0-3.43.51a1 1 0 0 0-.41 1.67l6.84 6.88L.82 29.8 0 32l2-.79 9.8-9.72 6.93 6.97a1 1 0 0 0 1.66-.4c.9-2.92.64-6.05-.63-8.85l5.46-5.46.05-.07q1.23.36 2.56.36 1.66.02 3.47-.53a1 1 0 0 0 .41-1.66zm-12.86 13.9L6.26 13.09c3.23-.38 6.72.92 9.24 3.44a11.4 11.4 0 0 1 3.35 9.22zm-.1-8.37a14 14 0 0 0-4.12-4.13l4.5-4.5q.7 1.2 1.79 2.3a11 11 0 0 0 2.36 1.8zm3.58-7.75a7.3 7.3 0 0 1-2.27-6.65l8.97 9c-2.59.38-4.74-.4-6.7-2.35"/></svg>');
UIkit.icon.add('key', '<svg width="20" height="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 0a9 9 0 0 0-6.85 14.86 1 1 0 0 0-.77.29L2.8 25.28a1 1 0 0 0 0 1.42q.02 0 .03.02l4.9 5a1 1 0 0 0 1.42-1.41l-4.23-4.32 2.57-2.59 4.25 4.32a1 1 0 0 0 1.41-1.41l-4.24-4.33 5.38-5.42a1 1 0 0 0 .3-.76A9 9 0 1 0 20.5 0m-.01 16a7 7 0 1 1 .02-14.02A7 7 0 0 1 20.49 16"/></svg>');
UIkit.icon.add('diamond', '<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M15 3h-.4l-.2.2h-.1v.1l-.1.1L1 17.4l-.6.5.5.7 23 29.7q.2.5.7.7l.4.6.5-.6q.5-.2.5-.7l23-29.7.6-.7-.6-.6L36 3.5l-.2-.2-.2-.2V3zm.8 2h7l-9 9.7zm11.5 0h6.9l2 9.7zm-2.3.5L35.7 17H14.2zm11.7 1.8L46 17h-7.2zm-23.4 0L11.2 17H4zM3.8 19h7.5L21 41.2zm9.7 0h23L25 45.5zm25.1 0h7.6L29 41.2z" transform="scale(5.12)" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode:normal"/></svg>');
UIkit.icon.add('facebook-group', '<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M9.55 11.5a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5m.45 8.25V16.4q0-.74.4-1.34a6.5 6.5 0 0 0-5.03 1.42A8 8 0 0 0 10 19.75m-5.55-5.09A8.5 8.5 0 0 1 9.5 13q1.57.01 2.97.53A8 8 0 0 1 15.5 13c1.66 0 3.19.42 4.2 1.16a8 8 0 1 0-15.25.5m14.43 1.43c-.4-.54-1.7-1.09-3.38-1.09-2 0-3.5.8-3.5 1.4V20a8 8 0 0 0 6.88-3.91M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m3.5-9.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></svg>');
UIkit.icon.add('fire', '<svg width="20" height="20" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M9.32 15.65a.8.8 0 0 1-.09-.85c.18-.34.25-.74.2-1.12a2 2 0 0 0-.26-.78 2 2 0 0 0-.54-.6A4 4 0 0 1 7.14 10c-1.7 2.24-1.05 3.51-.23 4.63a.75.75 0 0 1-.01.9 1 1 0 0 1-.4.29 1 1 0 0 1-.48.02 5.4 5.4 0 0 1-2.85-1.6 5 5 0 0 1-.9-1.56A5 5 0 0 1 2 10.9s-.13-2.46 2.84-4.87c0 0 3.51-2.98 2.3-5.18a.6.6 0 0 1 .1-.65.6.6 0 0 1 .63-.15L8 .1a7.6 7.6 0 0 1 2.96 3.5 7.2 7.2 0 0 1 .19 4.52q.49-.44.8-1.03l.03-.06c.2-.48.82-.33 1.05-.02.09.14 2.3 3.35 1.11 6.05a5.5 5.5 0 0 1-1.84 2.03 6 6 0 0 1-2.14.9 1 1 0 0 1-.47-.05 1 1 0 0 1-.38-.29M7.55 7.9a.4.4 0 0 1 .55.15q.06.09.08.2l.04.35c.02.5.02 1.04.22 1.53q.3.76.93 1.3a3 3 0 0 1 1.16 1.42c.22.57.25 1.2.08 1.77a4 4 0 0 0 1.4-.75l.1-.09a3.2 3.2 0 0 0 1.16-2.28 5.3 5.3 0 0 0-.82-2.97q-.39.54-.99.8-.37.15-.78.19a1 1 0 0 1-.43-.1 1 1 0 0 1-.32-.33.8.8 0 0 1-.04-.73c.41-.97.54-2.05.37-3.1A6 6 0 0 0 8.6 2.1c-.14 2.2-2.4 4.25-2.87 4.7l-.22.19c-2.43 1.96-2.26 3.75-2.26 3.83a3.7 3.7 0 0 0 .46 2.05 4 4 0 0 0 1.52 1.54c-.73-1.6-.73-3.52 1.95-6.27z"/></svg>');
UIkit.icon.add('badge', '<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.9 507.9" xml:space="preserve"><path d="M459.6 81.5c-37.2 0-67.4-30.2-67.4-67.4 0-7.8-6.3-14.1-14.1-14.1H129.9c-7.8 0-14.1 6.3-14.1 14.1 0 37.1-30.2 67.4-67.4 67.4-7.8 0-14.1 6.3-14.1 14.1V195c0 137.5 86.3 262.9 214.6 312 3.4 1.2 6.7 1.2 10.1 0 128.4-49.2 214.6-174.6 214.6-312V95.6c.1-7.8-6.2-14.1-14-14.1M254 478.7c-49.8-20.1-92.4-52.9-124.7-93.6 12.5-58.8 63.9-100.8 124.8-100.8 60.8 0 112.2 42 124.7 100.8-32.3 40.7-75 73.5-124.8 93.6m145.5-123.1C376.8 296.4 320 256 254.1 256s-122.7 40.4-145.4 99.7C87 320.9 72.3 281.7 66 240.5h17.7c7.8 0 14.1-6.3 14.1-14.1s-6.3-14.1-14.1-14.1H63.1c-.3-5.7-.5-11.5-.5-17.2v-11H119c7.8 0 14.1-6.3 14.1-14.1s-6.3-14.1-14.1-14.1H62.5v-47.2c41.4-6.2 74.3-39 80.4-80.4h222c6.2 41.4 39 74.3 80.4 80.4V195h.2c0 57.8-16.7 113.2-46 160.6"/><path d="M254 72.7c-41.4 0-75 33.6-75 75 0 41.3 33.6 75 75 75s75-33.6 75-75-33.6-75-75-75m0 121.8c-25.8 0-46.8-21-46.8-46.8s21-46.8 46.8-46.8 46.8 21 46.8 46.8-21 46.8-46.8 46.8"/></svg>');
UIkit.icon.add('sticker', '<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.75 3C19.55 3 21 4.46 21 6.25v6.88c0 .6-.24 1.17-.66 1.59l-5.62 5.62c-.42.42-1 .66-1.6.66H6.26A3.25 3.25 0 0 1 3 17.75V6.25C3 4.45 4.46 3 6.25 3zm0 1.5H6.25c-.97 0-1.75.78-1.75 1.75v11.5c0 .97.78 1.75 1.75 1.75H13v-3.06q-.33.05-.67.06l-.33.01a6.3 6.3 0 0 1-3.68-1.14.75.75 0 1 1 .86-1.23Q10.44 15 12 15q.69 0 1.32-.17A3.3 3.3 0 0 1 16.04 13l.21-.01h3.25V6.25c0-.97-.78-1.75-1.75-1.75m.69 10h-2.19c-.92 0-1.67.7-1.74 1.6v.15l-.01 2.19zM9 7.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5m6 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5" fill="#212121"/></svg>');
UIkit.icon.add('frame', '<svg width="20" height="20" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="M6.5 4v14m8-14v14M3.5 7h14m-14 8h14" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/></svg>');
UIkit.icon.add('effect', '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.54 1.5c-.71-.41-1.48-.25-2.2.04q-1.04.47-2.63 1.43l-.63.38c-.69.4-.85.48-1 .5s-.31-.01-1.05-.24l-.68-.21a22 22 0 0 0-2.83-.75c-.77-.12-1.53-.07-2.14.48-.6.56-.73 1.31-.7 2.1.03.76.22 1.74.44 2.93l.14.7c.14.78.16.95.12 1.11s-.13.32-.6.97l-.43.6c-.73 1-1.32 1.83-1.68 2.51-.36.7-.59 1.44-.27 2.2.33.76 1.03 1.1 1.78 1.28.72.18 1.7.27 2.9.38l.72.06c.78.07.94.1 1.06.17s.23.2.68.83l.41.58c.7.97 1.27 1.77 1.79 2.3.54.56 1.18.99 2 .89.81-.1 1.35-.67 1.77-1.33.42-.65.84-1.57 1.36-2.7l.3-.66.27-.55.03.03 4 4a.75.75 0 1 0 1.06-1.06l-3.84-3.84.07-.03.68-.24q1.75-.58 2.78-1.09c.7-.36 1.3-.85 1.48-1.64.18-.8-.16-1.49-.65-2.1-.46-.58-1.19-1.24-2.07-2.05L19.46 9c-.57-.52-.68-.64-.73-.77-.06-.14-.08-.31-.06-1.1V6.4a23 23 0 0 0-.06-2.98c-.1-.77-.35-1.51-1.07-1.92m-4.12 2.8a23 23 0 0 1 2.5-1.37c.59-.25.78-.19.88-.13s.24.19.33.81c.08.63.07 1.53.05 2.83l-.02.78c0 .6-.01 1.12.18 1.6.2.47.58.81 1.02 1.21l.09.08.47.44a21 21 0 0 1 1.96 1.92c.38.47.39.69.36.82-.04.15-.15.36-.71.65-.57.3-1.41.6-2.64 1.03l-.74.25c-.57.2-1.06.37-1.44.72s-.59.81-.85 1.38l-.33.71c-.55 1.2-.93 2.02-1.28 2.57s-.56.63-.7.65c-.12.01-.31 0-.74-.44s-.93-1.15-1.67-2.19l-.38-.52-.07-.1a4 4 0 0 0-1.09-1.16c-.44-.25-.95-.3-1.55-.35l-.12-.01-.64-.06a21 21 0 0 1-2.75-.35c-.6-.15-.71-.3-.76-.41-.05-.12-.08-.34.22-.91s.83-1.31 1.6-2.39l.46-.63c.37-.5.67-.93.78-1.42.12-.5.02-1-.09-1.6l-.14-.76c-.24-1.27-.4-2.14-.43-2.78s.1-.82.21-.93c.11-.1.3-.2.91-.1.62.08 1.45.34 2.67.71l.73.22c.57.18 1.05.33 1.56.27.51-.07.96-.33 1.48-.64z" fill="#1C274C"/></svg>');

Sau khi khai báo, bạn có thể sử dụng biểu tượng trong HTML như biểu tượng mặc định: