/Javascript/React/How to get svg from pucblic folder in react

How to get svg from pucblic folder in react

    <symbol id="black-king" viewBox="0 0 45 45">
        <g style={{ fill: "none", fillopacity: 1, fillRule: "evenodd", stroke: "#000000", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: 4, strokeDasharray: "none", strokeOpacity: 1 }}>
            <path d="M 22.5,11.63 L 22.5,6" style={{ fill: "none", stroke: "#000000", strokeLinejoin: "miter" }} id="path6570" />
            <path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style={{ fill: "#000000", fillOpacity: 1, strokeLinecap: "butt", strokeLinejoin: "miter" }} />
            <path d="M 12.5,37 C 18,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" style={{ fill: "#000000", stroke: "#000000" }} />
            <path d="M 20,8 L 25,8" style={{ fill: "none", stroke: "#000000", strokeLinejoin: "miter" }} />
            <path d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5" style={{ fill: "none", stroke: "#ffffff" }} />
            <path d="M 12.5,30 C 18,27 27,27 32.5,30 M 12.5,33.5 C 18,30.5 27,30.5 32.5,33.5 M 12.5,37 C 18,34 27,34 32.5,37" style={{ fill: "none", stroke: "#ffffff" }} />
        </g>
    </symbol>

How to get svg from pucblic folder in react

<g style="opacity:1; fill:none; fill-rule:evenodd; fill-opacity:1; stroke:#000000; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4; stroke-dasharray:none; stroke-opacity:1;">
    <g style="fill:#000000; stroke:#000000; stroke-linecap:butt;">
      <path d="M 9,36 C 12.39,35.03 19.11,36.43 22.5,34 C 25.89,36.43 32.61,35.03 36,36 C 36,36 37.65,36.54 39,38 C 38.32,38.97 37.35,38.99 36,38.5 C 32.61,37.53 25.89,38.96 22.5,37.5 C 19.11,38.96 12.39,37.53 9,38.5 C 7.65,38.99 6.68,38.97 6,38 C 7.35,36.54 9,36 9,36 z"/>
      <path d="M 15,32 C 17.5,34.5 27.5,34.5 30,32 C 30.5,30.5 30,30 30,30 C 30,27.5 27.5,26 27.5,26 C 33,24.5 33.5,14.5 22.5,10.5 C 11.5,14.5 12,24.5 17.5,26 C 17.5,26 15,27.5 15,30 C 15,30 14.5,30.5 15,32 z"/>
      <path d="M 25 8 A 2.5 2.5 0 1 1  20,8 A 2.5 2.5 0 1 1  25 8 z"/>
    </g>

How to get svg from pucblic folder in react

import { ReactComponent as Avatar1 } from './assets/avatar_1.svg';

use it as <Avatar1 />

Source: stackoverflow.com

Similar codes

0 vote197 views1 answer
React native communicate with webview
Javascript React
14 votes208 views4 answers
Conditional classname prop react
Javascript React
14 votes188 views2 answers
Adding border in react native
Javascript React
0 vote180 views1 answer
React-data-table-component api action button
Javascript React
0 vote183 views1 answer
React native svg size
Javascript React
0 vote198 views1 answer
Localhost server in react native
Javascript React
0 vote186 views5 answers
Arrow function component react shortcut vscode
Javascript React
0 vote249 views1 answer
React avoid spreading non-dom props across component
Javascript React
0 vote192 views1 answer
Stop React Ant Design Upload component from posting files automatically
Javascript React
1 vote159 views1 answer
Commit in react
Javascript React