@yababay67/postcss-plugin

0.0.1 • Public • Published

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 -->

Readme

Keywords

none

Package Sidebar

Install

npm i @yababay67/postcss-plugin

Weekly Downloads

0

Version

0.0.1

License

ISC

Unpacked Size

4.74 kB

Total Files

6

Last publish

Collaborators

  • yababay67