0

我正在使用运行良好的 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 文件。

我怎样才能做到这一点？

4

1 回答 1

0

使用图像标签：

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>

于 2020-12-11T12:04:53.530 回答