如何在物料ui SVG ICON中使用自定义SVG文件

Question

I am trying to use a chip with SVG delete icon,

The icon code is

const icon = (props) => {
    return (
        <SvgIcon>
            <img src={'ic_check.svg'} style={{width: '20px'}} width={'20px'}/>
        </SvgIcon>
    )
};

The content of SVG file

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <g fill="none" fill-rule="evenodd">
        <rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
        <path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
        <path d="M0 0h24v24H0z"/>
    </g>
</svg>

and the chip finally is

<Chip
      label={ViewUtils.NOT_EXPIRED}
      className={classes.chip}
      onDelete={() => {}}
      deleteIcon={<icon/>}/>

But this is not working and I checked for the path and it is correct as I can render same svg in img tag.

Answer 1

Nayan SvgIcon takes a svg path that you can further style. But in your case your svg is already styled. It doesn't take svg file directory path which actually lose SvgIcon API purpose. You just need to remove SvgIcon from img tag:

<Chip
  label={ViewUtils.NOT_EXPIRED}
  className={classes.chip}
  onDelete={() => {console.log('You Deleted this icon')}}
  deleteIcon={icon}
 />

and Make you svg as const or import from assets file directory I haven't tried that,

const icon = <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <g fill="none" fill-rule="evenodd">
                <rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10"/>
                <path fill="#FFF" fill-rule="nonzero" d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"/>
                <path d="M0 0h24v24H0z"/>
             </g>
           </svg>

There is a reason why we can't make <icon/> component. If we make it as component as following:

const Icon = (props) => {
return (
<SvgIcon>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
  >
    <g fill="none" fill-rule="evenodd">
      <rect width="20" height="20" x="2" y="2" fill="#6FB934" rx="10" />
      <path
        fill="#FFF"
        fill-rule="nonzero"
        d="M9.5 15.475L6.025 12l-1.183 1.175L9.5 17.833l10-10-1.175-1.175z"
      />
      <path d="M0 0h24v24H0z" />
    </g>
  </svg>
</SvgIcon>
)
};

It works like a charm but onDelete doesn't get fired on this component.I've reported this issue as well on material UI. In first case onDelete gets called every time. Feel free to ask any question.

EDITED Fixed the above issue for Icon as Component rather than const. here is the codesandbox link for working example: https://codesandbox.io/s/98842r4yy4

Answer 2

I am using React and typescript, created a component and added the tags from HTML and it worked normally.

export const IconTable: React.FC = () => {
    return (
        <svg width="130" height="130" viewBox="0 0 1024 1024">
            <path d="M505.947 123.597a23.096 23.096 0 0 0-16.99-7.477h-6.837c-17.929 0-32.631 13.468-34.198 "/>
        </svg>
);