diff options
author | Mark Otto <markdotto@gmail.com> | 2021-04-29 23:09:41 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2021-04-30 00:21:13 +0300 |
commit | 77af9074573a9dbf99b0a598a043203679bfcf13 (patch) | |
tree | 63c8b18be1aa0f98776e9785010fcd90c3cf2825 /README.md | |
parent | 8cc6e62a9f09f9374d9a7167d6a84993a12cf1a9 (diff) |
Add updated image, move figma link, add context around adding svgs
Diffstat (limited to 'README.md')
-rw-r--r-- | README.md | 13 |
1 files changed, 6 insertions, 7 deletions
@@ -7,7 +7,7 @@ <h3 align="center">Bootstrap Icons</h3> <p align="center"> - Official open source SVG icon library for Bootstrap. + Official open source SVG icon library for Bootstrap with over 1,300 icons. <br> <a href="https://icons.getbootstrap.com/"><strong>Explore Bootstrap Icons »</strong></a> <br> @@ -17,13 +17,10 @@ <a href="https://themes.getbootstrap.com/">Themes</a> · <a href="https://blog.getbootstrap.com/">Blog</a> + <br> </p> -## 1,300+ icons - -[![Bootstrap Icons full set](https://github.com/twbs/icons/blob/main/.github/preview.png)](https://icons.getbootstrap.com) - -[Also available in Figma.](https://www.figma.com/file/YjjMzXhECL1MIb6Qlm7VJO/Bootstrap-Icons-v1.4.1) +[![Bootstrap Icons preview](https://github.com/twbs/icons/blob/main/.github/preview.png)](https://icons.getbootstrap.com) ## Install @@ -33,6 +30,8 @@ Bootstrap Icons are packaged up and published to npm. We only include the proces npm i bootstrap-icons ``` +[Also available in Figma.](https://www.figma.com/file/YjjMzXhECL1MIb6Qlm7VJO/Bootstrap-Icons-v1.4.1) + ## Usage Depending on your setup, you can include Bootstrap Icons in a handful of ways. @@ -72,7 +71,7 @@ Here are some key scripts you'll use during development. Be sure to look to our ## Adding SVGs -Once a new SVG icon has been added to the `icons` directory, you'll need to optimize them. An npm script is used to: +Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with `fill` (no stroke). Once a new SVG icon has been added to the `icons` directory, we use an npm script to: 1. Optimize our SVGs with SVGO. 2. Modify the SVGs source HTML, removing all attributes before setting new attributes and values in our preferred order. |