| 1 | <p align="center">
|
| 2 | <a href="https://v5.getbootstrap.com/">
|
| 3 | <img src="https://v5.getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
|
| 4 | </a>
|
| 5 | </p>
|
| 6 |
|
| 7 | <h3 align="center">Bootstrap Icons</h3>
|
| 8 |
|
| 9 | <p align="center">
|
| 10 | Official open source SVG icon library for Bootstrap.
|
| 11 | <br>
|
| 12 | <a href="https://icons.getbootstrap.com/"><strong>Explore Bootstrap Icons »</strong></a>
|
| 13 | <br>
|
| 14 | <br>
|
| 15 | <a href="https://getbootstrap.com/docs/4.5/">Bootstrap</a>
|
| 16 | ·
|
| 17 | <a href="https://themes.getbootstrap.com/">Themes</a>
|
| 18 | ·
|
| 19 | <a href="https://blog.getbootstrap.com/">Blog</a>
|
| 20 | </p>
|
| 21 |
|
| 22 | ## 1,100+ icons
|
| 23 |
|
| 24 | [](https://icons.getbootstrap.com)
|
| 25 |
|
| 26 | [Also available in Figma.](https://www.figma.com/file/9YmlUAwhMv99G4yP4yN7Jy/Bootstrap-Icons-v1.0.0?node-id=0%3A1)
|
| 27 |
|
| 28 | ## Install
|
| 29 |
|
| 30 | Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this package—it's up to you and your team to implement. [Read our docs](https://icons.getbootstrap.com/) for usage instructions.
|
| 31 |
|
| 32 | ```shell
|
| 33 | npm i bootstrap-icons --save
|
| 34 | ```
|
| 35 |
|
| 36 | ## Usage
|
| 37 |
|
| 38 | Depending on your setup, you can include Bootstrap Icons in a handful of ways.
|
| 39 |
|
| 40 | - Copy-paste SVGs as embedded HTML
|
| 41 | - Reference via `<img>` element
|
| 42 | - Use the SVG sprite
|
| 43 | - Include via CSS
|
| 44 |
|
| 45 | [See the docs for more information.](https://icons.getbootstrap.com/#usage)
|
| 46 |
|
| 47 | ## Development
|
| 48 |
|
| 49 | [](https://github.com/twbs/icons/actions?workflow=Tests)
|
| 50 |
|
| 51 | Clone the repo, install dependencies, and start the Hugo server locally.
|
| 52 |
|
| 53 | ```shell
|
| 54 | git clone https://github.com/twbs/icons/
|
| 55 | cd icons
|
| 56 | npm i
|
| 57 | npm start
|
| 58 | ```
|
| 59 |
|
| 60 | Then open `http://localhost:4000` in your browser.
|
| 61 |
|
| 62 | ### npm scripts
|
| 63 |
|
| 64 | Here are some key scripts you'll use during development. Be sure to look to our `package.json` for a complete list of scripts.
|
| 65 |
|
| 66 | | Script | Description |
|
| 67 | | --- | --- |
|
| 68 | | `start` | Alias for running `docs-serve` |
|
| 69 | | `docs-serve` | Starts a local Hugo server |
|
| 70 | | `pages` | Generates permalink pages for each icon with template Markdown |
|
| 71 | | `icons` | Processes and optimizes SVGs in `icons` directory |
|
| 72 |
|
| 73 | ## Adding SVGs
|
| 74 |
|
| 75 | Once a new SVG icon has been added to the `icons` directory, you'll need to optimize them. An npm script is used to:
|
| 76 |
|
| 77 | 1. Optimize our SVGs with SVGO.
|
| 78 | 2. Modify the SVGs source HTML, removing all attributes before setting new attributes and values in our preferred order.
|
| 79 |
|
| 80 | Use `npm run icons` to run the script, run `npm run pages` to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.
|
| 81 |
|
| 82 | ## Publishing
|
| 83 |
|
| 84 | Documentation is published automatically when a new Git tag is published. See our GitHub Actions and `package.json` for more information.
|
| 85 |
|
| 86 | ## License
|
| 87 |
|
| 88 | MIT
|
| 89 |
|
| 90 | ## Author
|
| 91 |
|
| 92 | [@mdo](https://github.com/mdo)
|