如何在Material-UI中的SvgIcon中使用SVG文件 [英] How to use an SVG file in a SvgIcon in Material-UI

问题描述

我有一个SVG文件，我想用它制作一个SvgIcon组件，我该怎么做?

I've got an SVG file and I want to make an SvgIcon component out of it, how should I do that?

在文档中，所有示例均使用预定义的材质图标"或<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />的奇怪表示法，我不知道它是什么！

In the documentation, all the examples use either predefined Material Icons or a strange notation of <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> which I have no idea what it is!

推荐答案

<path />是SVG路径，即SVG的内部位. SvgIcon组件确实应该可以采用路径，但它不是:(

<path /> is an SVG path, i.e. the internal bits of the SVG. the SvgIcon component really should be able to take a path, but it doesn't :(

相反，您可以创建类似 https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

instead you can create a component like https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

，其中的svg源代码代替了path. (我建议使用 https://jakearchibald.github.io/svgomg/缩小一点)

with your svg source in place of the path. (I recommend minifying it a bit using https://jakearchibald.github.io/svgomg/)

这篇关于如何在Material-UI中的SvgIcon中使用SVG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！