如何呈现响应中的svg图标

Question

var filled_lock = ' <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch --><title>Locked</title><desc>Created with Sketch.</desc><defs></defs><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Icon/Locked/Filled/Light"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="-1" y="-1" width="15" height="15"></rect><g id="Icon/Locked/Filled/Dark" transform="translate(-1.000000, -1.000000)"><rect id="Rectangle" fill="#D8D8D8" opacity="0" x="0" y="0" width="15" height="15"></rect><g transform="translate(3.000000, 1.000000)" fill="#668cb3"><path d="M7.75,5.5 L2.25,5.5 L2.25,3.25 C2.25,1.73365625 3.483875,0.5 5.0005,0.5 C6.51659375,0.5 7.75,1.73365625 7.75,3.25 L7.75,5.5 Z M5.25,9.4685 L5.25,10.5 L4.75,10.5 L4.75,9.4685 C4.3186875,9.35746875 4,8.9659375 4,8.5 C4,7.94771875 4.44771875,7.5 5,7.5 C5.55228125,7.5 6,7.94771875 6,8.5 C6,8.9659375 5.6813125,9.35746875 5.25,9.4685 Z M8.25,5.5 L8.25,3.25 C8.25,1.4553125 6.7949375,0 5.0005,0 C3.2050625,0 1.75,1.4553125 1.75,3.25 L1.75,5.5 L0,5.5 L0,13 L10,13 L10,5.5 L8.25,5.5 Z" id="Fill-1"></path><path d="M5,8 C4.7243125,8 4.5,8.2243125 4.5,8.5 C4.5,8.7756875 4.7243125,9 5,9 C5.2756875,9 5.5,8.7756875 5.5,8.5 C5.5,8.2243125 5.2756875,8 5,8" id="Fill-3"></path></g></g></g></g></svg> ';

这个var filled_lock是我的svg图标，我试图在div中呈现它，但它没有显示出来。

我试过把它放进<img src={filled_lock} />，但是它没有出现

我试过<div dangerouslySetInnerHTML={{__html:{filled_lock}}} />还是没有成功

有没有人知道我们怎样才能做出反应

Answer 1

为此使用react-svg：

import { ReactSVG } from 'react-svg';

<ReactSVG src={filled_lock} />

Answer 2

您可以将svg映像保存在*.svg文件中，并将其导入如下：

import filled_lock from './filled_lock.svg';
function App() {
  return (
    <img src={filled_lock} alt="filled_lock" />
  );
}

或

import { ReactComponent as FilledLock } from './filled_lock.svg';
function App() {
  return (
    <FilledLock />
  );
}

文档