使用 svg 本地文件而不是图标（从 Bootstrap 5 图标到本地 svg 文件导入）答案

【问题标题】：Using svg local file instead of icon (from Bootstrap 5 icon to local svg file import)使用 svg 本地文件而不是图标（从 Bootstrap 5 图标到本地 svg 文件导入）
【发布时间】：2020-12-11 20:04:53
【问题描述】：

我正在使用 Bootstrap 5 图标，效果非常好，但我需要包含一些 svg 文件，因为它们不在图标集合中。

所以对于图标按钮我这样做：

<button type="button" class="btn">
      <svg width="2rem" height="2rem" viewBox="0 0 16 16" class="bi bi-file-earmark-medical" fill="#333333" xmlns="http://www.w3.org/2000/svg">
        <path d="M4 0h5.5v1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h1V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"/>
        <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 0 1 9.5 3z"/>
        <path fill-rule="evenodd" d="M7 5a.5.5 0 0 1 .5.5v.634l.549-.317a.5.5 0 1 1 .5.866L8 7l.549.317a.5.5 0 1 1-.5.866L7.5 7.866V8.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L6 7l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V5.5A.5.5 0 0 1 7 5zm-2 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
      </svg>
    </button>

正如您在上面看到的，它真的很忙，我不知道大多数参数的作用，因为有 3 条路径，其中包含很多东西。

我想要做的是修改上面的内容，以便我可以导入我拥有的本地 svg 文件。

我该怎么做？

【问题讨论】：

您是否尝试过使用 img 标签或object tag？这是一个 article 也关于使用 SVG。
上面有 3 个路径标签...我需要它们让它看起来和其他图标一样吗？我不知道它们是干什么用的
您可以使用两个标签来引用 SVG 文件。除非您想对其进行更改，否则无需操作 SVG。每条路径都在你的 SVG 中“绘制”一些东西。我检查了第一个绘制矩形，第二个绘制小三角形（页面折叠），第三个是图标中页面的“内容”。每个中的 d 属性只是关于如何构建路径的说明。

标签： html css twitter-bootstrap svg bootstrap-5

【解决方案1】：

使用图片标签：

button {
 padding: 20px;
 }
img {
  height: 200px;
  }

<button>
  <img src="https://cdn.rawgit.com/alexmwalker/03433aaec5293280f6b896e7a7a2ef1e/raw/08088a2c6f1fd5e363915003dc7e2e34cc04d3ec/alva.svg" />
</button>

使用对象标签：

button {
padding: 20px

}

object {
height: 200px
}

<button>
  <object type="image/svg+xml" data="https://cdn.rawgit.com/alexmwalker/03433aaec5293280f6b896e7a7a2ef1e/raw/08088a2c6f1fd5e363915003dc7e2e34cc04d3ec/alva.svg">
  fallback
</object>
</button>

【讨论】：