欢迎 Web Awesome，最大最好的开源 Web 组件库。

网站上的裸 SVG

您可以将图标作为裸 SVG 添加到您的标记中，但您需要做一些大量工作才能使它们适应。

基本使用

借助矢量的力量，浏览器可以立即绘制 SVG。只需将 SVG 代码直接添加到您的 HTML 中即可。

现在几点？

<div class="time-to-get-ill">
  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
    }
  </style>
  What time is it...
  <svg xmlns="http://www.w3.org/2000/svg" class="icon" aria-hidden="true" focusable="false" viewBox="0 0 512 512">
    <path
      fill="currentColor"
      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"
    />
  </svg>
</div>

确保添加一些 CSS

但 SVG 精灵的缺点之一是需要额外的样式才能使它们正常工作。我们的 Font Awesome javascript 通常会处理这个问题，但在这种情况下，您需要自行处理。

这是一个示例

<!-- Simple styling to size an SVG -->
<style>
  .icon {
    width: 2em;
    height: 2em;
    vertical-align: -0.125em;
  }
</style>