Tôi có tệp SVG và tôi muốn tạo thành phần SvgIcon trong đó, tôi nên làm như thế nào?Cách sử dụng tệp SVG trong SvgIcon trong Material-UI
Trong documentation, tất cả các ví dụ đều sử dụng Biểu tượng tài liệu được xác định trước hoặc ký hiệu lạ của <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> mà tôi không biết nó là gì!
<path /> là đường dẫn SVG, tức là các bit nội bộ của SVG. thành phần SvgIcon thực sự sẽ có thể để có một con đường, nhưng nó không :(
thay vào đó bạn có thể tạo ra một thành phần như https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js
với nguồn svg của bạn ở vị trí của path. (Tôi khuyên bạn nên rút gọn nó một chút bằng https://jakearchibald.github.io/svgomg/)
Nếu làm nhiều hơn một biểu tượng, bạn có thể không muốn lặp lại tất cả các soạn sẵn trong ví dụ tham chiếu trong câu trả lời chấp nhận bạn có thể sử dụng một máy phát điện phần wrapper như:.
const wrapSvgPath = (path, viewBox='0 0 24 24') => (props) => (
<SvgIcon {...props} viewBox={viewBox}>{path}</SvgIcon>
)
sử dụng như:
const facebookPath = (<path
d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
)
export const FacebookIcon = wrapSvgPath(facebookPath)
Để có được con đường cho SvgIcon, mở tập tin svg với soạn thảo văn bản và sao chép các biểu thức đường dẫn tương ứng.