你是不是也曾经从网上下载了一个神秘的 svg.js 文件，却发现图标怎么都显示不出来？别担心，这里有一个简单而有趣的解决方案，让你轻松搞定！


下面是一个完整的 HTML 文件代码，只需要将 index.html 和 svg.js 放在同一个文件夹下，就能看到你心心念念的图标啦！

​
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>SVG Icon Display</title>
   <style>
       #icon-container {
           display: none; /* 隐藏原始 SVG 字符串 */
      }
       #icon-display {
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
      }
       .icon {
           width: 50px;
           height: 50px;
           fill: currentColor; /* 这将使图标颜色与当前文本颜色一致 */
      }
       .icon + div {
           text-align: center;
           font-size: 14px;
      }
   </style>
</head>
<body>
   <div id="icon-container"></div>
   <div id="icon-display"></div>
   <script src="./svg.js"></script>
   <script>
       document.getElementById('icon-container').innerHTML =window._iconfont_svg_string_4562126;
​
       const symbols = document.querySelectorAll('#icon-container symbol');
       const iconDisplay = document.getElementById('icon-display');
​
       symbols.forEach(symbol => {
           const iconId = symbol.id;
           const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
           svg.setAttribute('class', 'icon');
           svg.setAttribute('aria-hidden', 'true');
           svg.innerHTML = `<use xlink:href="#${iconId}"></use>`;
           const label = document.createElement('div');
           label.textContent = `#${iconId}`;
           const container = document.createElement('div');
           container.appendChild(svg);
           container.appendChild(label);
           iconDisplay.appendChild(container);
      });
   </script>
</body>
</html>

小贴士

  1. 确保文件在同一个文件夹：将 index.html 和 svg.js 文件放在同一个文件夹下，这样才能正确加载图标。

  2. 命名一致：确保 svg.js 文件中的变量名为 window._iconfont_svg_string，这样代码才能正常工作。

结语

通过以上简单的步骤，你就可以在网页中展示从互联网下载的 svg.js 文件中的图标了。再也不用抓狂于那些显示不出来的图标了，赶紧试试吧！