Webpack - Bootstrap Icons
source link: https://odan.github.io/2021/01/07/webpack-bootstrap-icons.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Daniel Opitz - Blog
Developer, Trainer, Open Source Contributor
Blog About me DonateWebpack - Bootstrap Icons
07 Jan 2021
Table of contents
Requirements
Introduction
Bootstrap Icons is a free, high quality, open source icon library with nearly 1,200 icons.
I had some problems installing Bootstrap Icons with Webpack 5. There was no information on the web, so I decided to post it here for people who might be interested.
Installation
To get started, install via npm:
npm i bootstrap-icons
The file-loader resolves import/require() on a file into a url and emits
the file into the output directory.
To install the file-loader run:
npm i file-loader --save-dev
Then in the webpack.config.js file, add a new module rule as follows:
module: {
rules: [
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
include: path.resolve(__dirname, './node_modules/bootstrap-icons/font/fonts'),
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'webfonts',
publicPath: '../webfonts',
},
}
}
]
}
Optional change the outputPath and publicPath.
Then include the bootstrap-icons.css in your app js file:
require('bootstrap-icons/font/bootstrap-icons.css');
Finally, build the assets:
npm run build
Usage
Add HTML snippets to include Bootstrap Icons where desired.
<i class="bi-alarm"></i>
© 2021 Daniel Opitz | Twitter
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK