htmlcsstwitter-bootstrapbootstrap-4vuejs2

Bootstrap icons does not appear in the front-end when used in Vuejs Template

I am trying to build the Web application using the Vue.JS and within my application, I am trying to use the [Bootstrap Icons][1]. But for some reason even after adding the icons, they do not appear on the screen.

I did the following steps:

  1. Install Bootstrap Icons into the application:
npm install bootstrap-icons

After installing I am able to see it in my package.json file.

  1. Add it to Main.js file:
import 'bootstrap-icons/font/bootstrap-icons';
  1. Within the component add it to the required button:
<template>
  <button type="button" class="btn btn-secondary copy" @click="copyXML()">Copy<i class="bi bi-clipboard"></i></button>
</template>

This is not making any difference to my button text. I am still able to see only Copy text on the button.

As per the documentation, there is another way to add icons. When I add the SVG then I get the icons:

 <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>

I am not understanding why only SVG works, isn't it possible to add only <i class="bi bi-clipboard"></i> and get the icons?

This may be a silly question but I am looking for some explanation and usage of icons in the Vuejs application.

Solution

  • Finally, I was able to find the work-around. Most of the npm packages do not support Vuejs 3.x as it has been recently released.

    The workaround is not to install it as a npm library rather than including the direct js or as CDN link to our application.

    I added the following CDN to my index.html and that worked for me :

        <!-- Bootstrap Icons Starts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <!-- Bootstrap Icons Ends -->