I tried to use bootstrap-icons library in my vue project, right now I just import the CSS file so I can use as a icon font("i" tag).But I want to use them as svgs so I can use linear-gradient for color filling.
I installed bootstrap-icons to my project with
npm i bootstrap-icons
and use try to use them as it said on the website:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
It's not working, and I tried to use require() for the xlink:href or use v-bind to link the value to a var, none of them work, throwing error with "Cannot find module" or "Get 404". I tried to copy the bootstrap-icons document out side the node_modules and put it under the root, change the value of xlink:href to be "bootstrap-icons/bootstrap-icons.svg#heart-fill", still not working.
I'm a noob for vue and I build this project with vue-cli. I cannot figure out what is going on with this problem and I didn't find the solution on the Internet. Did any one meet the same problem before?
You can use the ~
shortcut to reference assets in node_modules
(see here):
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="~/bootstrap-icons/bootstrap-icons.svg#heart-fill"/>
</svg>
If you need dynamic binding you can use the fact that require
returns a path to the required svg-file:
<template>
<svg class="bi" width="32" height="32" fill="currentColor">
<use :xlink:href="`${iconUrl}`"/>
</svg>
</template>
<script>
const iconPath = require('bootstrap-icons/bootstrap-icons.svg');
export default {
name: 'App',
data() {
return {
iconUrl: iconPath + '#heart-fill'
};
}
};
</script>
You can do the same with import instead of require:
import iconPath from 'bootstrap-icons/bootstrap-icons.svg'
If you wonder where this behaviour is defined you can inspect your default vue-cli webpack-config as described here.
Although this is not exactly what you where asking for you could use the CSS icon font instead of svg:
<template>
<i :class="iconClass" style="font-size: 32px;"></i>
</template>
<script>
export default {
name: 'App',
data() {
return {
iconClass: 'bi-heart-fill'
};
}
};
</script>
<style>
@import "bootstrap-icons/font/bootstrap-icons.css";
</style>