Reactjs 如何在react中呈现svg图标 var filled_lock='LockedCreated with Sketch'；

这个var-filled_锁是我的svg图标，我试图在一个div中渲染它，但它没有显示出来

我试着把它放在

里，但还是没有显示出来

我试过

还是没有成功

---

有人知道我们如何在react中渲染它吗？您可以将svg图像保存在

*.svg

文件中，并将其导入为：

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> ';

import filled_lock from./filled_lock.svg'；
函数App（）{
返回(
);
}

或

从“/filled_lock.svg”导入{ReactComponent as FilledLock}；
函数App（）{
返回(
);
}

---

为此使用

react svg

：

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

从'react svg'导入{ReactSVG}；

进一步研究后，我发现在填充锁中使用引号是在显示字符串本身。删除字符串时，由于某些原因失败。当我修复时，它给了我想要的输出

新代码

import { ReactSVG } from 'react-svg';

<ReactSVG src={filled_lock} />

var filled\u lock=locked用草图创建。；

对于输出：

var filled_lock = <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="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>;

{filled_lock}

var filled_lock = <svg width="30px" height="30px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="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>;

<div>{filled_lock}</div>