how includes only a few icons from bootstrap-icons?

Question

how could I includes only a few icons from the bootstrap-icons project? I have added the project to my dependencies (yarn add bootstrap-icons) and searching in it I can see that it has a sass file with a giant map variable "$bootstrap-icons-map" I won't include all icons, sooo, how could I includes only some icons its there any way defined?

Answer 1

You can do it manually. You can create a web icon font from yourself: I use often this tool: https://fontello.com/ You can take the bootstrap-icons you want from here : https://icons.getbootstrap.com/

and drag and drop into the previous tool fontello. You have to set your font-name and customize icon-names and code. Now you are ready to download your web icon font (top right download button). In that folder you will have the subfolder font with your custom web-icon-font. Inside subfolder css you will find the your-font-name.css file and inside it you will find the rules to include your web icon font (@font-face rule, bring this rule inside your css) and the rules to include the icons with the class bi-icon-name (you have to do this customization inside fontello, namely change the prefix (default prefix is icon- , change to bi-) and the icons-name).
Now you can put the bootstrap-icons rules too inside your css/sass :

.bi::before,
[class^="bi-"]::before,
[class*=" bi-"]::before {
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

And now you can do: <i class="bi bi-nome-mia-icona></i>

This approach can seems intimitadatory but is pretty simple.

Another possibility is to build an svg icon font, this has a series of advantages against web icon font, for example if you have few icons you can embedd your svg icon font inside your html page and save an http request and the download but if you have several icons your html page could become too big, in this case the svg icon font should be extern and in this case there are a lot of problems to handle it. If you want more insight about how to create an svg icon font tell me.

Last but not least, you could use svg inline. For example put this directly into your html for yin-yang icon:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-yin-yang" viewBox="0 0 16 16">
    <path d="M9.167 4.5a1.167 1.167 0 1 1-2.334 0 1.167 1.167 0 0 1 2.334 0Z"/>
    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM1 8a7 7 0 0 1 7-7 3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 0 0 7 7 7 0 0 1-7-7Zm7 4.667a1.167 1.167 0 1 1 0-2.334 1.167 1.167 0 0 1 0 2.334Z"/>
  </svg>

In this case you haven't to include cdn, neither import anything. It's enough the svg inline that you can find for all the pther icons here (clicking on the icons) https://icons.getbootstrap.com/:

I hope this help you.