У меня есть SVG файл, и я хочу сделать из него компонент SvgIcon, как мне это сделать?
Как использовать 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;