Screencast
16. Add Bootstrap Icons to your Phoenix App
Icons are a crucial part of modern web design, providing visual cues that improve navigation and user experience. If you've started a new Phoenix application, you'll notice it comes with the Heroicons library by default. There's nothing wrong with it, but it might not be what you need.
In this video, we're going to walk you through how to add the popular open-source Bootstrap icon package to your Phoenix application, just like the Heroicons are added. Our goal is to equip you with the knowledge to find and install any open-source icon pack in the same way as demonstrated.
We'll cover everything from locating the GitHub repository to installing the icons via your mix.exs
file, modifying your Tailwind configuration, and updating your core components. By the end of this tutorial, you'll be able to enhance your projects with a wider range of professional icons.
Included Files
tailwind.config.js
plugin(function({matchComponents, theme}) {
let iconsDir = path.join(__dirname, "../deps/twbs_icons/icons")
let values = {}
let dir = "/"
fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
let name = path.basename(file, ".svg")
values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
})
matchComponents({
"bi": ({name, fullPath}) => {
let regex = /\s*(width|height)=["'][^"']*["']/g
let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
content = content.replace(regex, '')
let size = theme("spacing.6")
return {
[`--bi-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
"-webkit-mask": `var(--bi-${name})`,
"mask": `var(--bi-${name})`,
"mask-repeat": "no-repeat",
"background-color": "currentColor",
"vertical-align": "middle",
"display": "inline-block",
"width": size,
"height": size
}
}
}, {values})
})