Here is how I set up Bootstrap Icons in one of my Elixir Phonenix apps. To me it was more difficult than I expected so I want to write this post for future reference.
Get started
Install necessary libraries from NPM
I do not know much about Webpack but icons would not get loaded without file-loader set up. This post "Loading Fonts with webpack" by Chris Lis was helpful.
npm --prefix=assets install bootstrap-icons file-loader --save-dev
Import CSS and webfonts in the stylesheet
assets/css/app.scss
+ @import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
+
+ @font-face {
+ font-family: 'bootstrap-icons';
+ src: font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2') format('woff2'),
+ font-url('../node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff') format('woff');
+ }
Set up the file-loader for web fonts
assets/webpack.config.js
test: /\.[s]?css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
+ {
+ test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'fonts/',
+ },
+ },
+ ],
+ },
],
},
plugins: [
Usage
Pick an icon from Bootstrap Icons website and copy and paste an "Icon font" HTML tag like:
<i class="bi bi-plus-circle"></i>
Alternative methods
Alternatively, PhoenixInlineSvg.Helpers.svg_image/2
from phoenix_inline_svg is straight-forward and useful when we want to render SVG files in our view templates. All we need is make assets/static/svg/generic/
folder and copy necessary SVG files into it.
Top comments (1)
thanks for sharing! this is fairly helpful:)