93 lines
2.9 KiB
Markdown
93 lines
2.9 KiB
Markdown
|
<p align="center">
|
||
|
|
<a href="https://v5.getbootstrap.com/">
|
||
|
|
<img src="https://v5.getbootstrap.com/docs/5.0/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap logo" width="200" height="165">
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3 align="center">Bootstrap Icons</h3>
|
||
|
|
|
||
|
|
<p align="center">
|
||
|
|
Official open source SVG icon library for Bootstrap.
|
||
|
|
<br>
|
||
|
|
<a href="https://icons.getbootstrap.com/"><strong>Explore Bootstrap Icons »</strong></a>
|
||
|
|
<br>
|
||
|
|
<br>
|
||
|
|
<a href="https://getbootstrap.com/">Bootstrap</a>
|
||
|
|
·
|
||
|
|
<a href="https://themes.getbootstrap.com/">Themes</a>
|
||
|
|
·
|
||
|
|
<a href="https://blog.getbootstrap.com/">Blog</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
## 1,300+ icons
|
||
|
|
|
||
|
|
[](https://icons.getbootstrap.com)
|
||
|
|
|
||
|
|
[Also available in Figma.](https://www.figma.com/file/YjjMzXhECL1MIb6Qlm7VJO/Bootstrap-Icons-v1.4.1)
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
```shell
|
||
|
|
npm i bootstrap-icons
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
Depending on your setup, you can include Bootstrap Icons in a handful of ways.
|
||
|
|
|
||
|
|
- Copy-paste SVGs as embedded HTML
|
||
|
|
- Reference via `<img>` element
|
||
|
|
- Use the SVG sprite
|
||
|
|
- Include via CSS
|
||
|
|
|
||
|
|
[See the docs for more information.](https://icons.getbootstrap.com/#usage)
|
||
|
|
|
||
|
|
## Development
|
||
|
|
|
||
|
|
[](https://github.com/twbs/icons/actions?workflow=Tests)
|
||
|
|
|
||
|
|
Clone the repo, install dependencies, and start the Hugo server locally.
|
||
|
|
|
||
|
|
```shell
|
||
|
|
git clone https://github.com/twbs/icons/
|
||
|
|
cd icons
|
||
|
|
npm i
|
||
|
|
npm start
|
||
|
|
```
|
||
|
|
|
||
|
|
Then open `http://localhost:4000` in your browser.
|
||
|
|
|
||
|
|
### npm scripts
|
||
|
|
|
||
|
|
Here are some key scripts you'll use during development. Be sure to look to our `package.json` for a complete list of scripts.
|
||
|
|
|
||
|
|
| Script | Description |
|
||
|
|
| --- | --- |
|
||
|
|
| `start` | Alias for running `docs-serve` |
|
||
|
|
| `docs-serve` | Starts a local Hugo server |
|
||
|
|
| `pages` | Generates permalink pages for each icon with template Markdown |
|
||
|
|
| `icons` | Processes and optimizes SVGs in `icons` directory |
|
||
|
|
|
||
|
|
## 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:
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
## Publishing
|
||
|
|
|
||
|
|
Documentation is published automatically when a new Git tag is published. See our [GitHub Actions](https://github.com/twbs/icons/tree/main/.github/workflows) and [`package.json`](https://github.com/twbs/icons/blob/main/package.json) for more information.
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
MIT
|
||
|
|
|
||
|
|
## Author
|
||
|
|
|
||
|
|
[@mdo](https://github.com/mdo)
|