mirror/coreui-icons
1
0
Fork 0
mirror of https://github.com/coreui/coreui-icons.git synced 2025-08-19 06:51:23 +02:00
Code Issues Releases Wiki Activity

docs: update readme

Browse Source
This commit is contained in:
mrholek
2019-11-12 14:43:03 +01:00
parent e6a2554909
commit edfafc321a
1 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
README.md
View File

@@ -1,6 +1,6 @@
# CoreUI Icons - Simply beautiful open source icons
An open source icon set with marks in SVG, webfont and raster formats. Ready-to-use fonts and stylesheets that work with your favorite frameworks.
CoreUI Icons is an open-source icon set with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.
## Preview & Docs
@@ -28,19 +28,85 @@ or
```shell
npm install @coreui/icons --save
```
### Yarn
```shell
yarn add @coreui/icons
```
Or, you can also clone or [download this repository](https://github.com/coreui/coreui-icons/archive/master.zip) as zip.
## Usage
## Basic Use
### Basic Use
You can place CoreUI Icons just about anywhere using a CSS style prefix and the icon’s name. CoreUI Icons are designed to be used with inline elements ex. `<i>` or `<span>`.
Please use `cil-` prefix for linear icons, `cib-` prefix for brand icons, and `cif-` prefix for flag icons.
```html
<i class="cil-energy"></i>
```
```html
<i class="cib-twitter"></i>
```
```html
<i class="cif-us"></i>
```
### SVG Sprites
SVG sprites let you quickly use vector icons in your website. We have prepared all the icon set styles into their own SVG sprites.
Place sprite files with the rest of your static files, like images and styles, in your project. Make sure to add a proper path to the SVG sprite file, and use the fragment identifier specific to the SVG icon or symbol you want to display.
```html
<svg>
<use xlink:href="path/to/free.svg#cil-airplane-mode"></use>
</svg>
<svg>
<use xlink:href="path/to/brand.svg#cib-twitter"></use>
</svg>
<svg>
<use xlink:href="path/to/flag.svg#cif-uss"></use>
</svg>
```
### SVG Symbols
When you download your icon set, it comes with a sprites directory that contains SVG icon definitions. These icons can be referenced and used as inline SVGs like so:
```html
<!-- Define the symbols -->
<symbol id="cil-apple" viewBox="0 0 24 24">
<title>apple</title>
<path d="M21.207 9.987c-0.497-1.275-1.29-2.262-2.293-2.863-0.25 0.477-0.524 0.888-0.835 1.267l0.010-0.013c0.002 0.001 0.004 0.002 0.005 0.003 1.494 0.859 2.364 3.054 2.114 5.338-0.414 3.784-1.563 6.377-3.236 7.302-1.087 0.601-2.444 0.516-4.031-0.254l-0.155-0.075h-1.143l-0.155 0.075c-1.588 0.77-2.944 0.856-4.031 0.254-1.673-0.925-2.822-3.518-3.236-7.302-0.25-2.284 0.619-4.479 2.114-5.338 0.445-0.259 0.979-0.411 1.549-0.411 0.011 0 0.023 0 0.034 0l-0.002-0c1.132 0 2.436 0.53 3.853 1.578l0.051 0.037s2.043-0.248 2.852-0.616c2.439-1.107 2.976-2.867 3.072-3.106 0.262-0.632 0.414-1.366 0.414-2.135 0-0.813-0.17-1.587-0.476-2.287l0.014 0.037-0.191-0.477-0.513 0.005c-3.151 0.036-5.692 2.598-5.692 5.755 0 0.255 0.017 0.507 0.049 0.754l-0.003-0.029c-0.886-0.496-1.747-0.813-2.573-0.944-1.169-0.186-2.241-0.005-3.186 0.538-1.038 0.596-1.855 1.601-2.364 2.906-0.463 1.186-0.638 2.57-0.493 3.895 0.475 4.344 1.859 7.267 4.001 8.452 0.655 0.37 1.438 0.588 2.272 0.588 0.010 0 0.021-0 0.031-0h-0.002c0.918-0 1.904-0.244 2.952-0.73h0.461c1.987 0.923 3.754 0.971 5.253 0.142 2.142-1.185 3.526-4.107 4.001-8.452 0.145-1.325-0.030-2.709-0.493-3.895zM15.376 2.851c0.322-0.143 0.697-0.251 1.088-0.305l0.022-0.003c0.106 0.354 0.167 0.761 0.167 1.182 0 2.15-1.593 3.927-3.663 4.215l-0.022 0.003c-0.106-0.354-0.167-0.76-0.167-1.181 0-1.743 1.048-3.242 2.547-3.901l0.027-0.011z"></path>
</symbol>
<!-- Use the defined symbols -->
<svg>
<use xlink:href="#cil-apple"></use>
</svg>
```
It is also possible to link to an external SVG containing the definitions:
```html
<svg class="icon-home">
<use xlink:href="path/to/free-symbol-defs.svg#cil-apple"></use>
</svg>
```
Referencing an external SVG has the advantage that your icons get cached, with one HTTP request. But the external SVG and the HTML should be served from the same domain. This approach works fine in modern browsers except for IE 9+. In order to support IE 9+, You should use `/js/svgxuse.js` or `/js/svgxuse.min.js`. This polyfill detects if the icons are loaded properly; if they aren't, it sends one HTTP request to fetch and cache symbol definitions.
## CoreUI Icons PRO
If our free icon set is insufficient you can buy [CoreUI Icons Pro](https://coreui.io/icons/pro/) with more than 2000 icons, and more styles - Solid, Duo-Tone and Linear.
## License
### CoreUI Icons Free Icons
@@ -49,13 +115,13 @@ CoreUI Icons Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
- Icons — CC BY 4.0 License
- In the CoreUI Icons Free download, the CC BY 4.0 license applies to all icons
- In the CoreUI Icons Free, the CC BY 4.0 license applies to all icons
packaged as .svg and .js files types.
- Fonts — SIL OFL 1.1 License
- In the CoreUI Icons Free download, the SIL OLF license applies to all icons
- In the CoreUI Icons Free, the SIL OLF license applies to all icons
packaged as web and desktop font files.
- Code — MIT License
- In the CoreUI Icons Free download, the MIT license applies to all
- In the CoreUI Icons Free, the MIT license applies to all
non-font and non-icon files.
### CoreUI Icons Brand and Flag Icons