After 5 alpha versions, Bootstrap Icons has officially released v1.0.0 stable version recently. The icon library currently has more than 1,100 icons, and the team plans to add hundreds of icons to it in the upcoming minor version .
Since the release of the fifth alpha version, the team has redrawn more than one-third of the icons, mainly because of fine-tuning the path and shape. Most of the redrawing and improvements here are in preparation for icon fonts , but unfortunately, because the tools for generating fonts from SVG are not perfect enough, icon fonts have been postponed to version v1.1.0.
installation
Install via npm:
npm i bootstrap - icons
Or download the new version from GitHub, or download only the SVG file (not including other files in the repository).
usage
According to your own settings, you can add Bootstrap Icons to your project in several ways:
• Copy and paste the SVG as an embedded HTML element
<svg class = "bi bi-chevron-right" width = "32" height = "32" viewBox = "0 0 20 20" fill = "currentColor" xmlns = "http://www.w3.org/2000/ svg" > >path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354 a.5.5 0 010-.708z"/>
• by reference elements
<img src = "/assets/img/bootstrap.svg" alt = "" width = "32" height = "32" title = "Bootstrap" >
• Use SVG sprite
<svg class = "bi" width = "32" height = "32" fill = "currentColor" > <use xlink:href = "bootstrap-icons.svg#heart-fill" /></svg><svg class = "bi" width = "32" height = "32" fill = "currentColor" > <use xlink:href = "bootstrap-icons.svg#toggles" /></svg><svg class = "bi"width = "32" height = "32" fill = "currentColor" > <use xlink:href = "bootstrap-icons.svg#shop" /></svg>
• Introduced through CSS
. bi :: before { display : inline - block ; content : "" ; background - image : url ( "data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns= 'http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 3z' clip- rule='evenodd'/></svg>" ); background - repeat : no - repeat ; background - size : 1rem 1rem ;}
See the announcement for details .
For more such interesting article like this, app/softwares, games, Gadget Reviews, comparisons, troubleshooting guides, listicles, and tips & tricks related to Windows, Android, iOS, and macOS, follow us on Google News, Facebook, Instagram, Twitter, YouTube, and Pinterest.