CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-vue
Michael
Michael

Reputation: 2598

Using custom icons with bootstrap-vue <b-icon>, or a different approach?

I have a dynamic icon component that gets its icon from a string in the data which I'm using like this:

<b-icon :icon="my-icon"></b-icon>

That works well as long as the my-icon string in my data matches something available in the Bootstrap icons list. But sometimes my-icon is a completely custom string for which I need to create a custom SVG.

Is there an option to provide custom icons for use with an :icon prop in <b-icon>? Or should I avoid <b-icon> in that particular case and just use another method that would dynamically pull my custom icons as well as Bootstrap icons?

Something like this in Vue?

<svg class="bi" width="32" height="32" fill="currentColor">
  <use :xlink:href="'bootstrap-icons.svg#' + myIcon" />
</svg>

I suppose I'd have to build my own bootstrap-icons.svg file - maybe I could figure that out from their docs.

Essentially...

How do you approach using icon packs and your own custom icons while passing icon name as a prop to a component in Vue?

Upvotes: 1

Views: 4436

Answers (1)

Hiws
Hiws

Reputation: 10324

To my knowledge there's no way to expose custom SVGs to <b-icon>.

You could instead build a wrapper component which that wraps <b-icon>, and incorporate your own icons/SVGs into. First checking if the passed in icon matches any of your own, and if not then fall back to <b-icon>.

Alternatively you could take a look at how Bootstrap-Vue creates their icons on the GitHub repo, and copy this method to create your own custom component.

Upvotes: 3

Related Questions