私は を使用して Web アプリケーションを構築しようとしておりVue.JS、アプリケーション内で を使用しようとしています[Bootstrap Icons][1]。しかし、何らかの理由で、アイコンを追加した後でも画面に表示されません。
次の手順を実行しました。
Bootstrap Iconsアプリケーションにインストールします:
npm install bootstrap-icons
インストール後、ファイル内で確認できるようになりましたpackage.json。
Main.jsファイルに追加:
import 'bootstrap-icons/font/bootstrap-icons';
- コンポーネント内で、必要なボタンに追加します。
<template>
<button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>
Copyこれはボタンのテキストには何の変化ももたらしません。ボタンにはテキストしか表示されません。
ドキュメントによると、アイコンを追加する別の方法があります。 を追加すると、SVGアイコンが表示されます:
<button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive" viewBox="0 0 16 16">
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</svg></button>
なぜ のみが機能するのか理解できません。アイコンのみをSVG追加して取得することはできないのでしょうか?<i class="bi bi-clipboard"></i>
これは馬鹿げた質問かもしれませんが、Vuejs アプリケーションのアイコンの説明と使用方法を知りたいです。
ベストアンサー1
main.js に次の行を追加すると、うまくいくようです:
import 'bootstrap-icons/font/bootstrap-icons.css'
重要なのは最後の .css の部分のようです。これがないと、同じ名前の .js ファイルがインポートされます。
これで i タグが動作するようになりました:
<i class="bi bi-clipboard"></i>