0.1.9 • Published 1 year ago
postcss-bootstrap-icons v0.1.9
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 yoursrc/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 -->