Как использовать SVG файл в SvgIcon в Material-UI

Ответ 1

<path /> представляет собой путь SVG, то есть внутренние биты SVG. компонент SvgIcon действительно должен иметь возможность выбрать путь, но это не так :(

вместо этого вы можете создать такой компонент, как https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

с вашим источником SVG вместо path. (Я рекомендую немного уменьшить его, используя https://jakearchibald.github.io/svgomg/)

Ответ 2

Чтобы получить путь для SvgIcon, откройте svg файл с текстовым редактором и скопируйте соответствующее выражение пути.

Ответ 3

Чтобы использовать файл SVG в качестве значка, я использовал компонент <Icon/> с элементом <img/> внутри, установив height: 100% для элемента img и textAlign: center для класса root в <Icon/> компонент сделал свое дело:

JSX:

import Icon from '@material-ui/core/Icon';
import { makeStyles } from '@material-ui/styles';
...

<Icon classes={{root: classes.iconRoot}}>
  <img className={classes.imageIcon} src="/graphics/firebase-logo.svg"/>
</Icon>

Стили:

const useStyles = makeStyles({
  imageIcon: {
    height: '100%'
  },
  iconRoot: {
    textAlign: 'center'
  }
});

Результат:

Ответ 4

Если вы создаете более одного значка, вы можете не захотеть повторить весь шаблон в примере, указанном в принятом ответе. Вы можете использовать генератор компонентов-обертки, например:

const wrapSvgPath = (path, viewBox='0 0 24 24') => (props) => (
    <SvgIcon {...props} viewBox={viewBox}>{path}</SvgIcon>
)

используется как:

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)

Ответ 5

Решение, которое сработало для меня, заключается в следующем

 import React from 'react';
 import pure from 'recompose/pure';
 import {SvgIcon} from '@material-ui/core';

 let smile = (props) => (
   <SvgIcon {...props} >
<path d="M256,32C132.281,32,32,132.281,32,256s100.281,224,224,224s224-100.281,224-224S379.719,32,256,32z M256,448
c-105.875,0-192-86.125-192-192S150.125,64,256,64s192,86.125,192,192S361.875,448,256,448z M160,192c0-26.5,14.313-48,32-48
s32,21.5,32,48c0,26.531-14.313,48-32,48S160,218.531,160,192z M288,192c0-26.5,14.313-48,32-48s32,21.5,32,48
c0,26.531-14.313,48-32,48S288,218.531,288,192z M384,288c-16.594,56.875-68.75,96-128,96c-59.266,0-111.406-39.125-128-96"/>
   </SvgIcon>
 );

 smile = pure(smile);
 smile.displayName = 'smile';     
 smile.muiName = 'SvgIcon';

 export default smile;

Посмотрите на этот пример иконки материала.