Screencast

Add Bootstrap Icons to your Phoenix App

16. Add Bootstrap Icons to your Phoenix App

bootstrap icons tailwind

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})
    })
Back to Screencasts