Javascript svg图标不显示
我想从svg文件中导入一些图标，因为某些原因，我的站点中没有显示图标 以下是我所拥有的：Javascript svg图标不显示,javascript,reactjs,svg,Javascript,Reactjs,Svg,我想从svg文件中导入一些图标，因为某些原因，我的站点中没有显示图标 以下是我所拥有的： import icons from "../../assets/icons/s-icons.svg"; const Icon = props => ( <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className={`
import icons from "../../assets/icons/s-icons.svg";
const Icon = props => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
className={`icon icon-${props.name}`}
>
<use xlinkHref={`${icons}#${props.name}`} />
</svg>
);
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon-star"><use xlink:href="/s-icons-idd.svg#star"></use></svg>
任何帮助都将不胜感激我想知道为什么没有人回答这个问题，问题是否有问题？您使用的是不再受支持的SVG格式我想知道为什么没有人回答这个问题，问题是否有问题？您使用的是不再受支持的SVG格式
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="edit" d="M725.066 850.102c-99.62-99.584-41.618-41.544-41.618-41.544l192.804-192.768c0 0-62.134-62.098 41.544 41.546s-93.222 292.388-192.73 192.768zM640.294 767.342l-455.974-455.972 0.658-0.586-108.142-293.048 299.666 101.376 0.622-0.622 1.572 1.61v0.038l454.4 454.4-192.806 192.806zM358.072 208.75l-157.622-66.56 74.094 150.088 76.69 76.726 83.528-83.566-76.69-76.69z" />
<glyph unicode="" glyph-name="update" d="M727.846 224.038c-59.61-57.528-137.326-87.004-216.026-87.076-70.29 0.072-140.398 23.514-198.694 71.864-74.058 61.658-112.092 149.942-112.2 239.322 0 14.884 1.098 29.658 3.182 44.36l-121.344-22.748c-0.328-7.204-0.584-14.372-0.584-21.614-0.072-122.99 52.918-245.798 155.098-330.57 80.018-66.67 177.774-99.366 274.504-99.366h0.256c112.422 0 224.328 44.434 307.492 129.828l79.688-79.544 0.622 249.49-263.606 0.696 91.61-94.648zM786.688 778.46c-80.092 66.67-177.846 99.328-274.542 99.328-111.616 0-222.794-43.666-305.846-127.89l-75.374 69.596-1.354-241.444 260.974-1.5-92.672 96.986c59.282 56.504 136.376 85.394 214.308 85.466 70.216-0.072 140.434-23.442 198.656-71.864 74.058-61.658 112.092-149.87 112.274-239.396 0-12.874-0.914-25.784-2.45-38.73l120.87 23.186c0.072 5.23 0.328 10.424 0.328 15.544-0.072 123.098-53.028 245.798-155.174 330.714z" />
<glyph unicode="" glyph-name="collapse" d="M0 482.24h1024v-68.128h-1024v68.128z" />
<glyph unicode="" glyph-name="checkmark" d="M956.526 852.298c-285.11-174.776-491.96-395.264-584.96-505.894l-227.584 178.322-100.534-81.078 393.326-399.946c67.694 173.348 282.112 512.22 543.744 752.97l-23.99 55.626z" />
<glyph unicode="" glyph-name="calendar" d="M285.984 665.536c20.704 0 37.6 16.8 37.6 37.6v135.36c0 20.736-16.864 37.568-37.6 37.568-20.768 0-37.6-16.8-37.6-37.568v-135.36c0-20.8 16.832-37.6 37.6-37.6zM788.768 766.688v-0.64c15.552-13.888 25.44-34.016 25.44-56.576 0-41.632-33.76-75.424-75.488-75.424s-75.52 33.824-75.52 75.424c0 22.528 9.952 42.688 25.568 56.576v0.64h-352.832v-0.64c15.648-13.888 25.536-34.016 25.536-56.576 0-41.632-33.792-75.424-75.456-75.424-41.728 0-75.488 33.824-75.488 75.424 0 22.528 9.856 42.688 25.504 56.576v0.64h-171.072v-767.2h894.496v767.2h-170.688zM897.44 65.664h-766.304v509.44h766.304v-509.44zM738.72 665.536c20.768 0 37.568 16.8 37.568 37.6v135.36c0 20.736-16.8 37.568-37.568 37.568-20.704 0-37.632-16.8-37.632-37.568v-135.36c0-20.8 16.928-37.6 37.632-37.6zM698.432 368.256h-95.872v-95.744h95.904v95.744zM698.432 512.224h-95.872v-95.648h95.904v95.648zM698.432 228.224h-95.872v-95.744h95.904v95.744zM833.312 512.224h-95.84v-95.648h95.84v95.648zM833.312 368.256h-95.84v-95.744h95.84v95.744zM563.392 512.224h-95.744v-95.648h95.744v95.648zM293.6 368.256h-95.712v-95.744h95.712v95.744zM428.576 228.224h-95.776v-95.744h95.744v95.744zM293.6 228.224h-95.712v-95.744h95.712v95.744zM563.392 368.256h-95.744v-95.744h95.744v95.744zM563.392 228.224h-95.744v-95.744h95.744v95.744zM428.576 368.256h-95.776v-95.744h95.744v95.744zM428.576 512.224h-95.776v-95.648h95.744v95.648z" />
<glyph unicode="" glyph-name="arrow-up" d="M512 889.454l-401.628-486.582h262.108v-396.288h279.15v396.288h262.034z" />
<glyph unicode="" glyph-name="arrow-down" d="M651.558 493.166v396.288h-279.186v-396.288h-261.998l401.664-486.584 401.626 486.584z" />
<glyph unicode="" glyph-name="prev" d="M400.42 453.778l356.426 366.63-74.496 69.962-425.216-437.176 436.918-447.56 72.778 71.314z" />
<glyph unicode="" glyph-name="pointer-up" d="M512 670.336l-449.984-479.968h900.064z" />
<glyph unicode="" glyph-name="pointer-right" d="M193.248 902.24v-908.48l625.856 454.24z" />
<glyph unicode="" glyph-name="pointer-left" d="M205.984 448l625.824-454.24v908.48z" />
<glyph unicode="" glyph-name="flag" d="M0 0.928h127.968v959.072h-127.968v-959.072zM1024.16 960h-831.648v-575.776h831.648l-276.416 284.064 276.416 291.712z" />
<glyph unicode="" glyph-name="expand" d="M1024 482.24h-477.024v477.76h-68.032v-477.76h-478.944v-68.128h478.944v-478.112h68.032v478.112h477.024z" />
<glyph unicode="" glyph-name="envelope" d="M511.936 456.128l442.976 311.68c-5.312 1.056-10.688 1.696-16.256 1.696h-853.312c-5.6 0-11.008-0.64-16.288-1.696l442.88-311.68zM513.856 336.992l-1.92 2.816-1.888-2.816-509.12 358.272c-0.352-3.2-0.928-6.4-0.928-9.632v-535.424c0-47.808 38.208-86.624 85.344-86.624h853.312c47.2 0 85.376 38.816 85.376 86.624v535.424c0 3.264-0.576 6.432-0.992 9.632l-509.184-358.272z" />
<glyph unicode="" glyph-name="compare-full" d="M255.168 63.552v255.264h-255.168v-255.264h255.168zM638.496 832.48h-253.856v-768.896h253.856v768.896zM1023.168 574.944h-254.752v-511.36h254.752v511.36z" />
<glyph unicode="" glyph-name="x" d="M611.584 438.912l362.048-362.048c12.054-11.654 19.538-27.97 19.538-46.034 0-35.346-28.654-64-64-64-18.064 0-34.38 7.484-46.017 19.52l-0.017 0.018-362.048 362.048-362.048-362.048c-11.706-12.461-28.289-20.222-46.685-20.222-35.346 0-64 28.654-64 64 0 18.38 7.748 34.95 20.156 46.623l0.033 0.031 362.048 362.048-362.112 362.112c-12.054 11.654-19.538 27.97-19.538 46.034 0 35.346 28.654 64 64 64 18.064 0 34.38-7.484 46.017-19.52l0.017-0.018 362.048-362.048 362.176 362.112c11.654 12.054 27.97 19.538 46.034 19.538 35.346 0 64-28.654 64-64 0-18.064-7.484-34.38-19.52-46.017l-0.018-0.017-362.112-362.112z" />
<glyph unicode="" glyph-name="menu" horiz-adv-x="1317" d="M1316.571-64h-1316.571v146.286h1316.571v-146.286zM877.714 374.857h-877.714v146.286h877.714v-146.286zM0 813.714v146.286h1316.571v-146.286h-1316.571z" />
<glyph unicode="" glyph-name="mark" horiz-adv-x="205" d="M0 960h204.8v-512l-51.2-204.8h-102.4l-51.2 204.8v512zM102.4-64c-56.554 0-102.4 45.846-102.4 102.4s45.846 102.4 102.4 102.4v0c56.554 0 102.4-45.846 102.4-102.4s-45.846-102.4-102.4-102.4v0z" />
<glyph unicode="" glyph-name="send" horiz-adv-x="1205" d="M1198.562 955.723c-3.2 2.651-7.348 4.26-11.872 4.26-2.746 0-5.353-0.593-7.701-1.657l0.117 0.048-1168.685-520.433c-6.060-2.652-10.253-8.527-10.42-15.399v-0.021c0-0.010 0-0.022 0-0.035 0-6.905 4.076-12.857 9.953-15.582l0.106-0.044 230.882-99.991c4.036-1.867 164.683 77.282 481.882 237.508l-293.105-314.729c-4.993-5.353-8.061-12.557-8.072-20.478v-243.051c0 0 0-0.001 0-0.001 0-16.634 13.484-30.118 30.118-30.118 8.512 0 16.199 3.531 21.676 9.208l0.009 0.009 158.419 164.623 241.001-116.856c2.292-1.082 4.979-1.714 7.814-1.714 2.57 0 5.019 0.519 7.247 1.458l-0.123-0.046c4.722 1.962 8.333 5.79 9.962 10.538l0.037 0.123 306.056 934.249c0.506 1.529 0.798 3.289 0.798 5.117 0 5.2-2.362 9.849-6.071 12.931l-0.027 0.022z" />
</font></defs></svg>
{
test: /\.(jpg|svg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]-[hash:base58:3].[ext]',
}
}
]
},
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon icon-star"><use xlink:href="/s-icons-idd.svg#star"></use></svg>