@yababay67/postcss-plugin

PostCSS Bootstrap icons

This PostCSS plugin
creates svg icons from Bootstrap's icon set. Use it with Vite and Tailwind frameworks.

How does it work

Before:

.some-class{
    @icon bi github
}

After:

.some-class{
    background-image(img/icons/bi-github.svg);
}

Quick start

For setting the plugin up:

• init your Vite project with PostCSS and Tailwind;

• install the plugin running npm i -D postcss-bootstrap-icons;

• setup your postcss.config.cjs

  module.exports = {
      plugins: [
          require('postcss-bootstrap-icons'),
          require('autoprefixer'),
          require('tailwindcss')
      ]
  }

• execute in your terminal cp node_modules/postcss-bootstrap-icons/bootstrap-icons.css src;

• append line import "./bootstrap-icons.css" to import section of your src/main.{js|ts};

• uncomment desired icons in src/bootstrap-icons.css;

• make directory public/img/icons manually;

• execute in your terminal npm run dev;

• add the icon to your html anywhere using:

  <i class="bi github xs"></i><!-- extra small -->
  <i class="bi github sm"></i><!-- small -->
  <i class="bi github base"></i><!-- base -->
  <i class="bi github lg"></i><!-- large -->
  <i class="bi github xl"></i><!-- extra large -->