76
loading...
How to use Bootstrap Icons in Elixir Phoenix 1.5 app
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.
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-devassets/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');
+ }assets/webpack.config.jstest: /\.[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: [Pick an icon from Bootstrap Icons website and copy and paste an "Icon font" HTML tag like:
<i class="bi bi-plus-circle"></i>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.76