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 @yababay67/postcss-bootstrap-icons;

• setup your postcss.config.cjs

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

• append line import '@yababay67/postcss-bootstrap-icons/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 -->