简体   繁体   中英

svgprite loading all icons expect one

I'm using pug engine and trying to load svgs from a spritemap.vsg and i have 4 icons they all appear normally except one so i have this mixin and its working totally fine but one of the icons doesn't show

mixin svg(svg_file, name, size)
  span.icon
    svg(width=size, height=size, aria-hidden=true role="presentation")
      use(xlink:href=svg_file + '#' + name)

now ussing the icons:

 +svg('arrow', 500) --> shows normally

在此处输入图像描述

+svg('quote', 500) --> shows normally

在此处输入图像描述

+svg('illustration', 500) --> shows normally

在此处输入图像描述

+svg('logo', 500) --> doesn't show

i expected maybe something wrong with my logo icon itself however when i used the exact same sprite svg file on codepen all my icons are showing fine

<svg xmlns="http://www.w3.org/2000/svg"><symbol fill="none" id="sprite-arrow" viewBox="0 0 32 31"><title>arrow</title><path d="M1 30.645 30.348 1.358M14.043 1h16.63v17.5" stroke="#8A8474"/></symbol><symbol fill="none" id="sprite-illustration" viewBox="0 0 2433 720"><title>illustration</title><path d="M2432.54 720.212s-243.76-79.327-519.19-79.327c-192.2 0-468.05 31.945-727.89 49.904C1086.53 697.629 0 720 0 720l2432.54.212Z" fill="#C7C7C7"/><path d="M2029.67 634.892c-6.2 6.2-78.44 8.964-104.59 8.964-26.15 0-98.43-2.764-104.59-8.964-6.16-6.201 81.21-485.819 104.59-485.819 23.38 0 110.79 479.655 104.59 485.819Z" fill="#FDAD30"/><path d="M2031.12 512.673c-17.81 6.798-83.89 33.618-98.12 41.537v-9.003a7537.384 7537.384 0 0 1 47.88-27.94c17.15-10.011 35.56-18.901 51.55-30.667.79-.56.34-2.167-.74-1.718-17.6 7.47-34 18.228-50.43 27.865-16.44 9.638-32.28 19.312-48.3 29.211 0-22.96-.1-45.945-.3-68.955a541.198 541.198 0 0 0 75.23-38.287c.86-.485.3-2.017-.67-1.606a552.595 552.595 0 0 0-74.71 36.756c0-11.953-.09-23.907-.26-35.86-.67-61.521-.78-123.266-2.35-184.712 15.65-7.882 31.78-14.941 47.44-22.786 1.04-.523.29-2.316-.79-1.905-15.87 6.201-31.19 13.56-46.76 20.433-.86-31.788-2.06-63.501-4-95.214a.838.838 0 0 0-.24-.581.845.845 0 0 0-.58-.241.81.81 0 0 0-.58.241.806.806 0 0 0-.25.581c-2.2 58.943-2.01 117.962-1.27 176.98-16.21-12.961-33.61-24.429-50.01-36.98-.67-.485-1.27.598-.64 1.084 17.26 13.111 33.4 27.678 50.73 40.789v9.974c-17.59-8.031-35.45-15.502-53.23-23.122-1.38-.598-2.61 1.382-1.19 2.092 18.11 8.666 36.15 17.519 54.49 25.736.42 29.211.9 58.421 1.27 87.631.68 51.062 1.8 102.087 2.88 153.149a3882.93 3882.93 0 0 0-100.33-49.007c-1.31-.598-2.39 1.195-1.12 1.905 32.9 18.846 66.8 35.88 101.56 51.024.9 42.396 1.76 84.793 2.32 127.189.06.483.3.925.67 1.246.37.32.84.497 1.33.497a2.034 2.034 0 0 0 2-1.743c-.6-54.051-.68-108.325-.83-162.226 17.52-4.333 83.67-32.647 99.36-40.416 1.83-.785.71-3.586-1.01-2.951Z" fill="#263238"/><path d="M2246.38 656.169c4.66 4.624 58.84 6.687 78.56 6.687s73.86-2.063 78.52-6.687c4.67-4.623-61.13-364.845-78.52-364.845-17.39 0-83.23 360.183-78.56 364.845Z" fill="#C7C7C7"/><path d="M2245.27 564.386c13.41 5.082 63.01 25.296 73.71 31.181v-6.764c-11.96-7.069-24-14.024-36-21.016a430.233 430.233 0 0 1-38.71-22.927c-.57-.421-.22-1.643.58-1.299a324.908 324.908 0 0 1 37.87 20.939c12.19 7.146 24.22 14.521 36.26 21.934 0-17.272.07-34.531.23-51.777a411.08 411.08 0 0 1-56.52-28.735c-.65-.382-.23-1.49.5-1.223a419.11 419.11 0 0 1 56.02 27.627c0-8.979 0-17.959.19-26.748.5-46.236.61-92.51 1.76-138.708-11.73-5.961-23.85-11.196-35.62-17.157-.76-.382-.23-1.72.61-1.414 11.93 4.662 23.39 10.202 35.12 15.285.61-23.844 1.53-47.689 2.98-71.494 0-.765 1.22-.803 1.22 0 1.69 44.287 1.53 88.612.96 132.9 12.19-9.706 25.18-18.304 37.6-27.742.46-.382.96.42.46.802-12.96 9.859-25.11 20.788-38.21 30.57v7.642c13.18-6.037 26.75-11.654 39.97-17.386 1.03-.459 1.94 1.07.88 1.567-13.57 6.534-27.14 13.183-40.89 19.335l-.99 65.838c-.5 38.212-1.34 76.615-2.14 114.941a2936.871 2936.871 0 0 1 75.35-36.798c.95-.458 1.79.917.84 1.452a790.764 790.764 0 0 1-76.42 38.212c-.69 31.868-1.34 63.699-1.76 95.529a1.493 1.493 0 0 1-2.55 1.054c-.28-.28-.43-.659-.43-1.054.42-40.619.49-81.2.61-121.819-13.15-3.248-62.82-24.532-74.63-30.34-.99-.802-.11-2.904 1.15-2.407Z" fill="#263238"/><path d="M1705.23 657.761c4.5 4.508 57.34 6.52 76.57 6.52 19.22 0 72.06-2.012 76.6-6.52 4.55-4.509-59.61-355.761-76.6-355.761-16.99 0-81.12 351.215-76.57 355.761Z" fill="#47CEFB"/><path d="M1704.15 568.262c13.04 4.955 61.4 24.666 71.87 30.404v-6.744c-11.66-6.893-23.36-13.675-35.06-20.493-12.56-7.452-26.08-13.824-37.75-22.356-.55-.41-.26-1.603.53-1.267a316.195 316.195 0 0 1 36.96 20.418c11.88 6.968 23.62 14.159 35.36 21.388 0-16.842.06-33.671.18-50.488a402.515 402.515 0 0 1-55.1-28.02c-.6-.372-.19-1.453.52-1.192a410.13 410.13 0 0 1 54.62 26.939c0-8.756 0-17.512.19-26.082.48-45.085.56-90.207 1.71-135.255-11.47-5.812-23.29-10.917-34.72-16.729-.75-.373-.23-1.677.55-1.379 11.63 4.546 22.84 9.948 34.25 14.904.63-23.25 1.52-46.501 2.94-69.714 0-.158.06-.31.17-.421a.603.603 0 0 1 .85 0c.11.111.17.263.17.421 1.6 43.185 1.49 86.407.93 129.591 11.89-9.464 24.56-17.847 36.63-27.051.48-.372.93.41.49.783-12.64 9.613-24.48 20.269-37.27 29.808v7.452c12.9-5.887 26.09-11.364 38.98-16.953 1.04-.448 1.94 1.043.89 1.527-13.26 6.372-26.45 12.855-39.9 18.854-.3 21.387-.67 42.812-.93 64.199-.49 37.261-1.31 74.707-2.13 112.079a3056.398 3056.398 0 0 1 73.48-35.882c.97-.447 1.75.895.86 1.416a775.339 775.339 0 0 1-74.52 37.261c-.67 31.075-1.31 62.112-1.72 93.15-.05.35-.23.669-.5.899-.27.23-.62.357-.97.357s-.7-.127-.97-.357c-.27-.23-.45-.549-.5-.899.45-39.607.52-79.178.63-118.785-12.85-3.168-61.29-23.922-72.77-29.585-1.04-.634-.22-2.683 1.05-2.198Z" fill="#263238"/><path d="M2159.23 612.627c7.82 7.818 98.81 11.278 131.87 11.278s123.88-3.46 131.92-11.278C2431.05 604.81 2320.49 0 2291.1 0c-29.39 0-139.78 604.81-131.87 612.627Z" fill="#8739E1"/><path d="M2157.39 458.498c22.47 8.544 105.77 42.719 123.88 52.373v-11.363c-20.07-11.833-40.24-23.495-60.4-35.243-21.61-12.559-44.85-23.794-65.02-38.446-.98-.726-.42-2.777.94-2.179 22.22 9.227 42.72 22.983 63.61 35.115 20.89 12.132 40.71 24.392 60.87 36.866 0-29.02.13-58.012.39-86.975a689.732 689.732 0 0 1-94.92-48.229c-1.03-.641-.34-2.521.85-2.051a698.844 698.844 0 0 1 93.98 46.392c0-15.093.1-30.159.3-45.196.86-77.619.99-155.325 2.99-232.944-19.78-9.954-40.11-18.754-59.8-28.75-1.28-.64-.39-2.905 1.02-2.392 19.99 7.818 39.3 17.087 58.95 25.631 1.07-40.07 2.61-80.097 5.04-120.082 0-.272.11-.532.31-.725.19-.192.45-.3.72-.3.27 0 .53.108.73.3.19.193.3.453.3.725 2.77 74.33 2.56 148.746 1.62 223.162 20.46-16.318 42.25-30.757 63.09-46.606.82-.598 1.58.769.77 1.367-21.74 16.575-42.12 34.901-64.07 51.262v12.816c22.21-10.124 44.72-19.565 67.11-29.177 1.75-.769 3.33 1.752 1.53 2.606-22.81 10.979-45.58 22.128-68.73 32.466-.51 36.852-1.05 73.704-1.62 110.556-.82 64.334-2.23 128.668-3.63 193.002a5044.513 5044.513 0 0 1 126.57-61.771c1.58-.769 2.99 1.495 1.41 2.435a1322.632 1322.632 0 0 1-128.16 64.292c-1.13 53.483-2.12 106.953-2.94 160.408a2.524 2.524 0 0 1-4.31 1.782 2.525 2.525 0 0 1-.73-1.782c.77-68.35.85-136.401 1.06-204.579-22.08-5.468-105.51-41.181-125.33-50.964-1.97-1.068-.56-4.528 1.62-3.802Z" fill="#263238"/></symbol><symbol fill="none" id="sprite-logo" viewBox="0 0 30 30"><title>logo</title><path d="M19.666 11.997c-4.753 1.275-7.212-.915-7.847-2.169.388 6.182 1.948 7.818 2.68 7.863 2.997-.407 6.351 1.028 7.654 1.796 2.17-2.901 5.791-3.084 7.33-2.813-1.291-2.09-5.063-5.951-9.817-4.677Z" fill="url(#a)"/><path d="M22.217 19.42c3.876 1.897 6.298 6.404 7.783 8.946-4.96-3.524-9.516-1.536-11.173-.101-.776.542-2.745 1.647-4.134 1.728-2.906.17-4.166-2.745-4.682-6.168-.414-2.738-2.261-2.971-3.068-2.711.936-.746 2.849-1.898 4.295.067 1.446 1.966 2.066 2.17 2.648 2.407 3.875 1.05 7.007-2.271 8.331-4.169Z" fill="url(#b)"/><path d="M12.161 22.4c3.591 3.768 8.235-.396 10.108-2.949-3.1-1.735-6.502-1.943-7.815-1.83-2.357.068-3.714 1.39-5.813.61-2.099-.78-4.262-2.677-1.937-9.726 1.86-5.64-.065-7.999-1.26-8.473l.007.023c.388 1.289 1.01 3.358-2.17 7.738-5.632 7.754-2.756 15.612-.614 18.572l.027-.045c.67-1.096 2.162-3.534 4.01-5.005 2.066-1.83 3.681-1.152 4.036-.644.284.407 1.066 1.322 1.421 1.729Z" fill="url(#c)"/><path d="M6.62 8.235C8.325 2.975 6.534.554 5.425 0c1.809.542 6.298 2.033 6.298 8.676.516 7.862 2.002 8.258 2.777 8.913-.442.011-1.583.217-2.616.542-1.033.326-1.927.418-2.131.407-4.166-.712-5.264-3.728-3.133-10.303Z" fill="url(#d)"/><defs><linearGradient id="a" x1="15" y1="0" x2="15" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#FDAD31"/><stop offset="1" stop-color="#FCAD2F"/></linearGradient><linearGradient id="b" x1="15.084" y1=".096" x2="15.084" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#45C8F8"/><stop offset="1" stop-color="#47D0FC"/></linearGradient><linearGradient id="c" x1="15" y1="0" x2="15" y2="30" gradientUnits="userSpaceOnUse"><stop stop-color="#671CB5"/><stop offset="1" stop-color="#671CB3"/></linearGradient><linearGradient id="d" x1="9.963" y1="0" x2="9.963" y2="18.404" gradientUnits="userSpaceOnUse"><stop stop-color="#AA6DEA"/><stop offset="1" stop-color="#7A27DE"/></linearGradient></defs></symbol><symbol fill="none" id="sprite-quote" viewBox="0 0 94 70"><title>quote</title><circle cx="22" cy="48" r="22" fill="#fff"/><path d="M46 1C21.147 1 1 21.147 1 46" stroke="#fff"/><circle cx="70" cy="48" r="21.5" fill="#fff" stroke="#fff"/><path d="M94 1C69.147 1 49 21.147 49 46" stroke="#fff"/></symbol></svg>

now trying to use the logo icon

<svg>
  <use xlink:href="#sprite-logo"></use>
</svg>

IT WORKS !!

在此处输入图像描述

any suggestions what might be causing this issue?

Okay i fixed the issue just in case anybody faced an isue like that my svg that won't show has defs and the content inside the defs was not showing in the browser, i ended up just recreating the logo and it worked fine.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM