<svg xmlns="http://www.w3.org/2000/svg" width="281" height="62.581" role="img" aria-label="NJ TRANSIT Logo" data-cy="site-logo-desktop" class="d-none d-md-inline d-print-none"><g fill="#fff" stroke="#1a1818" stroke-width=".071"><path d="M159.768 7.414h0l-5-6.956h.608l44.443 61.6h-.81zM166.726 7.685h0l39.31 54.37h-.878L160.851.459h.675zM171.52 6.875h0L166.861.459h.608l44.442 61.6h-.809zM179.423 9.441h0L172.94.459h.675l44.51 61.6h-.877zM187.663 9.507h0l37.89 52.552h-3.106L178.208.459h2.9zM222.516 53.815h0L184.152.321h2.972l44.445 61.734h-3.18zM227.311 51.859h0L190.366.459h2.972l44.442 61.6h-3.107zM232.444 50.776h0L196.244.458h2.972l44.443 61.6h-3.041zM238.318 50.843h0L202.049.321h22.221l44.578 61.732h-22.492z"></path></g> <g fill="#fff"><path d="M47.493.557v3.428h-5.786v15.857h-4.028V3.985h-5.785V.557zM62.11 1.053a4.767 4.767 0 011.8 1.346 5.972 5.972 0 01.965 1.62 5.411 5.411 0 01.357 2.026 5.82 5.82 0 01-.686 2.7 3.845 3.845 0 01-2.264 1.875 3.539 3.539 0 011.849 1.52 6.463 6.463 0 01.544 3.019v1.3a9.672 9.672 0 00.108 1.8 1.612 1.612 0 00.749 1.1v.486h-4.378q-.186-.643-.265-1.037a9.407 9.407 0 01-.173-1.667l-.026-1.8a3.687 3.687 0 00-.633-2.467 3.2 3.2 0 00-2.277-.617h-3.905v7.586H49.89V.557h9.19a8.376 8.376 0 013.03.496zm-8.237 2.8v5.228h4.31a4.515 4.515 0 001.926-.317 2.2 2.2 0 001.136-2.191 2.47 2.47 0 00-1.1-2.377 3.918 3.918 0 00-1.852-.344zM74.6.557h4.544l6.78 19.285h-4.357l-1.271-3.986h-7.052l-1.31 3.986H67.74zm-.271 12h4.914l-2.42-7.591zM88.372.557h4.2l7.632 13.428V.557h3.729v19.285h-4L92.106 6.16v13.682h-3.734zM110.594 13.885a3.952 3.952 0 00.724 1.979 4.182 4.182 0 003.387 1.192 7.179 7.179 0 002.332-.314 2.242 2.242 0 001.7-2.239 1.654 1.654 0 00-.837-1.48 9.021 9.021 0 00-2.645-.9l-2.059-.457a13.058 13.058 0 01-4.2-1.478 4.683 4.683 0 01-1.964-4.17 5.553 5.553 0 011.895-4.3 8.043 8.043 0 015.564-1.713 8.492 8.492 0 015.228 1.615 5.75 5.75 0 012.27 4.685h-3.857a2.723 2.723 0 00-1.538-2.438 5.29 5.29 0 00-2.373-.477 4.514 4.514 0 00-2.519.622 1.967 1.967 0 00-.941 1.735 1.637 1.637 0 00.928 1.528 11.607 11.607 0 002.536.795l3.35.8a8.535 8.535 0 013.3 1.4 4.723 4.723 0 011.709 3.93 5.536 5.536 0 01-2.026 4.38 8.514 8.514 0 01-5.726 1.743 9.324 9.324 0 01-5.941-1.714 5.685 5.685 0 01-2.164-4.714zM129.152 19.842h-3.985V.557h3.985zM146.994.557v3.428h-5.785v15.857h-4.028V3.985h-5.786V.557z"></path></g> <g fill="#fff"><path d="M40.017 30.651v1.242h-3.514v9.214h-1.436v-9.214h-3.514v-1.242zM41.924 30.63h1.286v3.907a3.7 3.7 0 01.818-.819 2.74 2.74 0 011.544-.409 2.283 2.283 0 012.247 1.158 3.957 3.957 0 01.32 1.757v4.885h-1.307v-4.791a2.668 2.668 0 00-.214-1.227 1.369 1.369 0 00-1.312-.625 2.193 2.193 0 00-1.447.547 2.619 2.619 0 00-.649 2.065v4.031h-1.286zM55.514 33.687a2.876 2.876 0 011.15.983 3.414 3.414 0 01.508 1.341 8.989 8.989 0 01.112 1.689h-5.528a3.256 3.256 0 00.542 1.852 1.81 1.81 0 001.57.7 2.024 2.024 0 001.584-.658 2.259 2.259 0 00.461-.885h1.264a2.649 2.649 0 01-.332.934 3.431 3.431 0 01-.627.842 2.95 2.95 0 01-1.428.767 4.319 4.319 0 01-1.034.114 3.171 3.171 0 01-2.392-1.035 4.047 4.047 0 01-.98-2.9 4.4 4.4 0 01.987-2.98 3.246 3.246 0 012.582-1.144 3.435 3.435 0 011.561.38zm.442 2.985a3.343 3.343 0 00-.359-1.328 1.83 1.83 0 00-1.734-.922 1.913 1.913 0 00-1.46.635 2.413 2.413 0 00-.625 1.615zM65.333 30.651l1.974 8.494 2.386-8.494h1.509l2.4 8.562 1.978-8.562h1.55l-2.741 10.457h-1.491l-2.433-8.671-2.436 8.671h-1.491l-2.737-10.457zM83.085 36.51a.7.7 0 00.59-.369 1.04 1.04 0 00.092-.486 1.028 1.028 0 00-.464-.941 2.507 2.507 0 00-1.329-.292 1.694 1.694 0 00-1.417.534 1.752 1.752 0 00-.305.88h-1.2a2.221 2.221 0 01.913-1.973 3.724 3.724 0 012.034-.555 4.034 4.034 0 012.179.527 1.772 1.772 0 01.831 1.6v4.371a.557.557 0 00.082.319.4.4 0 00.35.121 1.87 1.87 0 00.194-.011c.072-.007.149-.018.231-.032v.939a3.545 3.545 0 01-.459.11 3.183 3.183 0 01-.43.023 1.064 1.064 0 01-.967-.468 1.777 1.777 0 01-.222-.7 3.244 3.244 0 01-1.125.882 3.5 3.5 0 01-1.614.374 2.4 2.4 0 01-1.732-.642 2.124 2.124 0 01-.672-1.6 2.063 2.063 0 01.661-1.637 3.154 3.154 0 011.735-.716zm-2.7 3.426a1.529 1.529 0 00.963.314 3.033 3.033 0 001.312-.3 1.713 1.713 0 001.07-1.674v-1.029a2.087 2.087 0 01-.6.269 4.252 4.252 0 01-.721.146l-.771.09a3.043 3.043 0 00-1.051.279 1.1 1.1 0 00-.606 1.046 1.025 1.025 0 00.399.86zM92.633 33.48h1.416q-.271.733-1.2 3.349-.7 1.967-1.166 3.207a21.573 21.573 0 01-1.571 3.559 1.8 1.8 0 01-1.571.641 3.066 3.066 0 01-.418-.021 3.311 3.311 0 01-.361-.077v-1.151a4.483 4.483 0 00.486.114 1.976 1.976 0 00.265.021.923.923 0 00.525-.119 1.1 1.1 0 00.283-.291q.036-.058.257-.59t.322-.79l-2.835-7.853h1.461l2.054 6.214zM108.471 30.651v1.242h-3.514v9.214h-1.436v-9.214h-3.514v-1.242zM115.927 34.245a3.836 3.836 0 011.01 2.882 4.958 4.958 0 01-.891 3.038 3.211 3.211 0 01-2.761 1.2 3.111 3.111 0 01-2.479-1.061 4.206 4.206 0 01-.918-2.85 4.548 4.548 0 01.967-3.052 3.239 3.239 0 012.6-1.136 3.419 3.419 0 012.472.979zm-.786 5.046a4.815 4.815 0 00.467-2.135 3.826 3.826 0 00-.337-1.728 1.9 1.9 0 00-1.841-1.048 1.812 1.812 0 00-1.687.893 4.156 4.156 0 00-.532 2.149 3.616 3.616 0 00.527 2.019 1.851 1.851 0 001.672.808 1.743 1.743 0 001.731-.958zM131.199 30.94a3.708 3.708 0 011.877 2.861h-1.392a2.517 2.517 0 00-1.037-1.648 3.547 3.547 0 00-1.984-.516 3.084 3.084 0 00-2.392 1.088 4.731 4.731 0 00-.971 3.241 5.248 5.248 0 00.8 3.031 2.939 2.939 0 002.613 1.17 3.3 3.3 0 002.3-.82 3.468 3.468 0 00.931-2.652h-3.278v-1.179h4.585v5.593h-.9l-.339-1.348a5.31 5.31 0 01-1.253 1.1 4.626 4.626 0 01-2.331.528 4.5 4.5 0 01-3.143-1.2 5.77 5.77 0 01-1.435-4.146 6.01 6.01 0 011.4-4.183 4.421 4.421 0 013.447-1.482 5.24 5.24 0 012.502.562zM141.703 34.245a3.839 3.839 0 011.01 2.882 4.958 4.958 0 01-.891 3.038 3.21 3.21 0 01-2.761 1.2 3.109 3.109 0 01-2.479-1.061 4.2 4.2 0 01-.919-2.85 4.555 4.555 0 01.967-3.052 3.241 3.241 0 012.6-1.136 3.419 3.419 0 012.473.979zm-.786 5.046a4.825 4.825 0 00.468-2.135 3.815 3.815 0 00-.338-1.728 1.9 1.9 0 00-1.841-1.048 1.815 1.815 0 00-1.687.893 4.162 4.162 0 00-.527 2.152 3.622 3.622 0 00.527 2.019 1.853 1.853 0 001.672.808 1.743 1.743 0 001.726-.961zM145.345 39.586h1.478v1.522h-1.478z"></path></g> <path d="M276.454 53.305a4.6 4.6 0 11-.021 0zm-.021.719a3.924 3.924 0 00.021 7.837 3.925 3.925 0 000-7.837zm-.864 6.6h-.822v-5.163a9.214 9.214 0 011.46-.123 2.714 2.714 0 011.6.392 1.233 1.233 0 01.473 1.069 1.284 1.284 0 01-1.008 1.254v.042c.452.082.761.494.864 1.255a4.223 4.223 0 00.329 1.275h-.864a3.789 3.789 0 01-.35-1.317.965.965 0 00-1.111-.9h-.567zm0-2.859h.6c.679 0 1.255-.246 1.255-.884 0-.453-.329-.905-1.255-.905a3.9 3.9 0 00-.6.042z" fill="#fff"></path> <g fill="#fff"><path d="M17.95 17.268V.327h5.062v1c.007 5.732.005 11.463.026 17.2a5.208 5.208 0 01-1.131 3.4 3.776 3.776 0 01-4.569 1.083 10.1 10.1 0 01-4.124-3.408c-2.374-2.962-4.785-5.9-7.368-9.079v18.485H0v-.97V4.521a3.157 3.157 0 012.2-3.253 3.7 3.7 0 013.917 1.26C7.538 4.196 8.83 5.952 10.191 7.66q3.605 4.526 7.229 9.039c.111.14.244.265.53.569z"></path> <path d="M24.693.265h5.136v1.028c0 6.291-.036 12.582.012 18.872.036 4.629-3.77 8.71-8.744 9.631-4.2.777-7.573-.745-10.357-3.422a39.2 39.2 0 01-3.082-3.7 2.625 2.625 0 01-.2-.313c-.014-2.4 0-5.045 0-7.6 1.231 1.587 2.569 3.361 3.877 4.894a27.848 27.848 0 003.956 4.134c3.027 2.34 6.773 1.635 8.452-1.491a7.036 7.036 0 00.874-3.108c.094-5.918.066-11.836.079-17.755-.002-.368-.003-.734-.003-1.17z"></path></g></svg>
I have an SVG like the one above. It contains a path.
Typically, I import my SVG like
import { ReactComponent as CaretIcon } from './icons/caret.svg'
How would I import the above SVG into my React app?
CodePudding user response：
One option is to just return it as JSX:
export function MySvg() {
return <svg xmlns="http://www.w3.org/2000/svg" width="281" height="62.581" role="img" aria-label="NJ TRANSIT Logo" data-cy="site-logo-desktop" class="d-none d-md-inline d-print-none"><g fill="#fff" stroke="#1a1818" stroke-width=".071"><path d="M159.768 7.414h0l-5-6.956h.608l44.443 61.6h-.81zM166.726 7.685h0l39.31 54.37h-.878L160.851.459h.675zM171.52 6.875h0L166.861.459h.608l44.442 61.6h-.809zM179.423 9.441h0L172.94.459h.675l44.51 61.6h-.877zM187.663 9.507h0l37.89 52.552h-3.106L178.208.459h2.9zM222.516 53.815h0L184.152.321h2.972l44.445 61.734h-3.18zM227.311 51.859h0L190.366.459h2.972l44.442 61.6h-3.107zM232.444 50.776h0L196.244.458h2.972l44.443 61.6h-3.041zM238.318 50.843h0L202.049.321h22.221l44.578 61.732h-22.492z"></path></g> <g fill="#fff"><path d="M47.493.557v3.428h-5.786v15.857h-4.028V3.985h-5.785V.557zM62.11 1.053a4.767 4.767 0 011.8 1.346 5.972 5.972 0 01.965 1.62 5.411 5.411 0 01.357 2.026 5.82 5.82 0 01-.686 2.7 3.845 3.845 0 01-2.264 1.875 3.539 3.539 0 011.849 1.52 6.463 6.463 0 01.544 3.019v1.3a9.672 9.672 0 00.108 1.8 1.612 1.612 0 00.749 1.1v.486h-4.378q-.186-.643-.265-1.037a9.407 9.407 0 01-.173-1.667l-.026-1.8a3.687 3.687 0 00-.633-2.467 3.2 3.2 0 00-2.277-.617h-3.905v7.586H49.89V.557h9.19a8.376 8.376 0 013.03.496zm-8.237 2.8v5.228h4.31a4.515 4.515 0 001.926-.317 2.2 2.2 0 001.136-2.191 2.47 2.47 0 00-1.1-2.377 3.918 3.918 0 00-1.852-.344zM74.6.557h4.544l6.78 19.285h-4.357l-1.271-3.986h-7.052l-1.31 3.986H67.74zm-.271 12h4.914l-2.42-7.591zM88.372.557h4.2l7.632 13.428V.557h3.729v19.285h-4L92.106 6.16v13.682h-3.734zM110.594 13.885a3.952 3.952 0 00.724 1.979 4.182 4.182 0 003.387 1.192 7.179 7.179 0 002.332-.314 2.242 2.242 0 001.7-2.239 1.654 1.654 0 00-.837-1.48 9.021 9.021 0 00-2.645-.9l-2.059-.457a13.058 13.058 0 01-4.2-1.478 4.683 4.683 0 01-1.964-4.17 5.553 5.553 0 011.895-4.3 8.043 8.043 0 015.564-1.713 8.492 8.492 0 015.228 1.615 5.75 5.75 0 012.27 4.685h-3.857a2.723 2.723 0 00-1.538-2.438 5.29 5.29 0 00-2.373-.477 4.514 4.514 0 00-2.519.622 1.967 1.967 0 00-.941 1.735 1.637 1.637 0 00.928 1.528 11.607 11.607 0 002.536.795l3.35.8a8.535 8.535 0 013.3 1.4 4.723 4.723 0 011.709 3.93 5.536 5.536 0 01-2.026 4.38 8.514 8.514 0 01-5.726 1.743 9.324 9.324 0 01-5.941-1.714 5.685 5.685 0 01-2.164-4.714zM129.152 19.842h-3.985V.557h3.985zM146.994.557v3.428h-5.785v15.857h-4.028V3.985h-5.786V.557z"></path></g> <g fill="#fff"><path d="M40.017 30.651v1.242h-3.514v9.214h-1.436v-9.214h-3.514v-1.242zM41.924 30.63h1.286v3.907a3.7 3.7 0 01.818-.819 2.74 2.74 0 011.544-.409 2.283 2.283 0 012.247 1.158 3.957 3.957 0 01.32 1.757v4.885h-1.307v-4.791a2.668 2.668 0 00-.214-1.227 1.369 1.369 0 00-1.312-.625 2.193 2.193 0 00-1.447.547 2.619 2.619 0 00-.649 2.065v4.031h-1.286zM55.514 33.687a2.876 2.876 0 011.15.983 3.414 3.414 0 01.508 1.341 8.989 8.989 0 01.112 1.689h-5.528a3.256 3.256 0 00.542 1.852 1.81 1.81 0 001.57.7 2.024 2.024 0 001.584-.658 2.259 2.259 0 00.461-.885h1.264a2.649 2.649 0 01-.332.934 3.431 3.431 0 01-.627.842 2.95 2.95 0 01-1.428.767 4.319 4.319 0 01-1.034.114 3.171 3.171 0 01-2.392-1.035 4.047 4.047 0 01-.98-2.9 4.4 4.4 0 01.987-2.98 3.246 3.246 0 012.582-1.144 3.435 3.435 0 011.561.38zm.442 2.985a3.343 3.343 0 00-.359-1.328 1.83 1.83 0 00-1.734-.922 1.913 1.913 0 00-1.46.635 2.413 2.413 0 00-.625 1.615zM65.333 30.651l1.974 8.494 2.386-8.494h1.509l2.4 8.562 1.978-8.562h1.55l-2.741 10.457h-1.491l-2.433-8.671-2.436 8.671h-1.491l-2.737-10.457zM83.085 36.51a.7.7 0 00.59-.369 1.04 1.04 0 00.092-.486 1.028 1.028 0 00-.464-.941 2.507 2.507 0 00-1.329-.292 1.694 1.694 0 00-1.417.534 1.752 1.752 0 00-.305.88h-1.2a2.221 2.221 0 01.913-1.973 3.724 3.724 0 012.034-.555 4.034 4.034 0 012.179.527 1.772 1.772 0 01.831 1.6v4.371a.557.557 0 00.082.319.4.4 0 00.35.121 1.87 1.87 0 00.194-.011c.072-.007.149-.018.231-.032v.939a3.545 3.545 0 01-.459.11 3.183 3.183 0 01-.43.023 1.064 1.064 0 01-.967-.468 1.777 1.777 0 01-.222-.7 3.244 3.244 0 01-1.125.882 3.5 3.5 0 01-1.614.374 2.4 2.4 0 01-1.732-.642 2.124 2.124 0 01-.672-1.6 2.063 2.063 0 01.661-1.637 3.154 3.154 0 011.735-.716zm-2.7 3.426a1.529 1.529 0 00.963.314 3.033 3.033 0 001.312-.3 1.713 1.713 0 001.07-1.674v-1.029a2.087 2.087 0 01-.6.269 4.252 4.252 0 01-.721.146l-.771.09a3.043 3.043 0 00-1.051.279 1.1 1.1 0 00-.606 1.046 1.025 1.025 0 00.399.86zM92.633 33.48h1.416q-.271.733-1.2 3.349-.7 1.967-1.166 3.207a21.573 21.573 0 01-1.571 3.559 1.8 1.8 0 01-1.571.641 3.066 3.066 0 01-.418-.021 3.311 3.311 0 01-.361-.077v-1.151a4.483 4.483 0 00.486.114 1.976 1.976 0 00.265.021.923.923 0 00.525-.119 1.1 1.1 0 00.283-.291q.036-.058.257-.59t.322-.79l-2.835-7.853h1.461l2.054 6.214zM108.471 30.651v1.242h-3.514v9.214h-1.436v-9.214h-3.514v-1.242zM115.927 34.245a3.836 3.836 0 011.01 2.882 4.958 4.958 0 01-.891 3.038 3.211 3.211 0 01-2.761 1.2 3.111 3.111 0 01-2.479-1.061 4.206 4.206 0 01-.918-2.85 4.548 4.548 0 01.967-3.052 3.239 3.239 0 012.6-1.136 3.419 3.419 0 012.472.979zm-.786 5.046a4.815 4.815 0 00.467-2.135 3.826 3.826 0 00-.337-1.728 1.9 1.9 0 00-1.841-1.048 1.812 1.812 0 00-1.687.893 4.156 4.156 0 00-.532 2.149 3.616 3.616 0 00.527 2.019 1.851 1.851 0 001.672.808 1.743 1.743 0 001.731-.958zM131.199 30.94a3.708 3.708 0 011.877 2.861h-1.392a2.517 2.517 0 00-1.037-1.648 3.547 3.547 0 00-1.984-.516 3.084 3.084 0 00-2.392 1.088 4.731 4.731 0 00-.971 3.241 5.248 5.248 0 00.8 3.031 2.939 2.939 0 002.613 1.17 3.3 3.3 0 002.3-.82 3.468 3.468 0 00.931-2.652h-3.278v-1.179h4.585v5.593h-.9l-.339-1.348a5.31 5.31 0 01-1.253 1.1 4.626 4.626 0 01-2.331.528 4.5 4.5 0 01-3.143-1.2 5.77 5.77 0 01-1.435-4.146 6.01 6.01 0 011.4-4.183 4.421 4.421 0 013.447-1.482 5.24 5.24 0 012.502.562zM141.703 34.245a3.839 3.839 0 011.01 2.882 4.958 4.958 0 01-.891 3.038 3.21 3.21 0 01-2.761 1.2 3.109 3.109 0 01-2.479-1.061 4.2 4.2 0 01-.919-2.85 4.555 4.555 0 01.967-3.052 3.241 3.241 0 012.6-1.136 3.419 3.419 0 012.473.979zm-.786 5.046a4.825 4.825 0 00.468-2.135 3.815 3.815 0 00-.338-1.728 1.9 1.9 0 00-1.841-1.048 1.815 1.815 0 00-1.687.893 4.162 4.162 0 00-.527 2.152 3.622 3.622 0 00.527 2.019 1.853 1.853 0 001.672.808 1.743 1.743 0 001.726-.961zM145.345 39.586h1.478v1.522h-1.478z"></path></g> <path d="M276.454 53.305a4.6 4.6 0 11-.021 0zm-.021.719a3.924 3.924 0 00.021 7.837 3.925 3.925 0 000-7.837zm-.864 6.6h-.822v-5.163a9.214 9.214 0 011.46-.123 2.714 2.714 0 011.6.392 1.233 1.233 0 01.473 1.069 1.284 1.284 0 01-1.008 1.254v.042c.452.082.761.494.864 1.255a4.223 4.223 0 00.329 1.275h-.864a3.789 3.789 0 01-.35-1.317.965.965 0 00-1.111-.9h-.567zm0-2.859h.6c.679 0 1.255-.246 1.255-.884 0-.453-.329-.905-1.255-.905a3.9 3.9 0 00-.6.042z" fill="#fff"></path> <g fill="#fff"><path d="M17.95 17.268V.327h5.062v1c.007 5.732.005 11.463.026 17.2a5.208 5.208 0 01-1.131 3.4 3.776 3.776 0 01-4.569 1.083 10.1 10.1 0 01-4.124-3.408c-2.374-2.962-4.785-5.9-7.368-9.079v18.485H0v-.97V4.521a3.157 3.157 0 012.2-3.253 3.7 3.7 0 013.917 1.26C7.538 4.196 8.83 5.952 10.191 7.66q3.605 4.526 7.229 9.039c.111.14.244.265.53.569z"></path> <path d="M24.693.265h5.136v1.028c0 6.291-.036 12.582.012 18.872.036 4.629-3.77 8.71-8.744 9.631-4.2.777-7.573-.745-10.357-3.422a39.2 39.2 0 01-3.082-3.7 2.625 2.625 0 01-.2-.313c-.014-2.4 0-5.045 0-7.6 1.231 1.587 2.569 3.361 3.877 4.894a27.848 27.848 0 003.956 4.134c3.027 2.34 6.773 1.635 8.452-1.491a7.036 7.036 0 00.874-3.108c.094-5.918.066-11.836.079-17.755-.002-.368-.003-.734-.003-1.17z"></path></g></svg>