SVG → Vue
Bọc bất kỳ SVG nào thành component một tệp .vue — hoặc chỉ lấy khối template để đưa vào component bạn đã có.
hoặc nhấp để chọn — chỉ nhận SVG
Tên component lấy từ tên tệp. Khối script chỉ dùng để đặt tên cho component — cứ xóa đi nếu bạn không cần.
Chỉ phần đánh dấu, để dán vào một component bạn đã có. Nếu tệp SVG có phần tử style nội tuyến, phần CSS đó nằm trong khối style của tệp phía trên chứ không phải ở đây.
không phải đổi tên gì cả
Template của Vue được phân tích như HTML, nên một tệp SVG có thể đưa vào đúng như lúc nó được viết. stroke-width vẫn là stroke-width, class vẫn là class, và thuộc tính style nội tuyến vẫn chạy. Việc chuyển đổi chủ yếu chỉ là bọc lại tệp — vì thế kết quả trông rất giống đầu vào.
Phần còn lại do cơ chế truyền tiếp thuộc tính lo. Với một phần tử gốc duy nhất, mọi thứ bạn đặt lên component đều rơi xuống thẻ svg, nên width, class hay trình xử lý nhấp chuột đều chạy mà không cần khai báo prop nào.
ba bước
Chọn một tệp .svg — nó vẫn nằm trên thiết bị của bạn.
Cả tệp .vue, hoặc chỉ phần template.
Import như mọi component khác và định kích thước từ bên ngoài.
giải đáp nhanh
Vì bạn không cần. Component có một gốc duy nhất sẽ chuyển thẳng mọi thuộc tính bạn đưa vào tới thẻ svg, nên width, height, class và các trình lắng nghe sự kiện đều đã chạy sẵn. Chỉ khai báo props khi bạn muốn tính toán gì đó từ chúng.
Chỉ để đặt tên cho component, cái tên sẽ hiện trong Vue devtools và trong các thông báo cảnh báo. Không có nó thì component vẫn hiển thị y hệt, nên xóa đi hoàn toàn an toàn.
Vào khối style có scoped ở cuối component. Vue loại bỏ thẻ style và script nằm trong template, nên một tệp SVG xuất từ Illustrator hay Figma — vốn gần như luôn kèm một bảng kiểu nội tuyến — sẽ hiển thị mất sạch màu. Chuyển phần CSS ra ngoài giữ cho nó tiếp tục chạy, còn scoped đảm bảo nó không rò sang phần còn lại của ứng dụng.
Thay giá trị fill hoặc stroke cố định bằng currentColor rồi đặt màu bằng CSS trên một phần tử cha. Công cụ đổi màu SVG có thể chuyển mọi màu trong tệp sang currentColor trước khi bạn chuyển đổi.
Với kết quả này thì có — script setup và defineOptions là tính năng của Vue 3. Trên Vue 2, khối template vẫn dùng được: cứ dán vào phần template của một component Options API thông thường.
Không. Việc chuyển đổi chỉ là xử lý chuỗi ký tự thuần túy diễn ra trong trình duyệt của bạn.