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>

object タグの使用:

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 に答える