1
0
mirror of https://github.com/konpa/devicon.git synced 2025-02-06 16:18:47 +01:00
devicon/README.md

112 lines
4.5 KiB
Markdown
Raw Normal View History

2015-05-09 09:06:06 +02:00
# Devicon v2
2014-03-02 00:11:54 +01:00
2020-07-24 08:57:54 +02:00
[https://devicons.github.io/devicon/](https://devicons.github.io/devicon/)
2014-03-02 00:11:54 +01:00
2015-05-09 09:06:06 +02:00
Devicon aims to gather all logos representing development languages and tools.
2015-05-13 17:08:43 +02:00
Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark.
Devicon has 80+ icons and 200+ versions. And it's growing!
2015-05-09 09:06:06 +02:00
2020-07-24 08:57:54 +02:00
See all available icons on the [new website](https://devicons.github.io/devicon/).
2014-10-10 15:55:44 +02:00
2018-04-15 19:01:09 +02:00
## Icon requests
When you want to request a icon please feel feel to create a issue. See our [contribution guidelines](https://github.com/konpa/devicon/blob/master/CONTRIBUTING.md) for more information.
2014-10-10 15:38:03 +02:00
## How to use
2014-07-21 09:31:53 +02:00
2020-07-24 08:57:54 +02:00
For a super fast setup go check [https://devicons.github.io/devicon/](https://devicons.github.io/devicon/)
2015-05-09 09:06:06 +02:00
2014-10-10 15:55:44 +02:00
_2 ways of using devicon:_
2014-10-10 15:49:54 +02:00
2014-11-28 14:02:50 +01:00
#### SVG icons
2014-03-02 00:11:54 +01:00
2020-07-24 08:57:54 +02:00
- Copy/paste svg code (from the [svg folder](https://github.com/devicons/devicon/tree/master/icons) or the [project page](https://github.com/devicons/devicon) using your dev tool)
2014-10-10 15:38:03 +02:00
```html
<!-- for git plain version -->
2014-10-10 15:49:54 +02:00
<svg class="devicon-git-plain" viewBox="0 0 128 128">
2014-10-10 15:38:03 +02:00
<path fill="#F34F29" d="M124.742,58.378L69.625,3.264c-3.172-3.174-8.32-3.174-11.497,0L46.685,14.71l14.518,14.518c3.375-1.139,7.243-0.375,9.932,2.314c2.703,2.706,3.462,6.607,2.293,9.993L87.42,55.529c3.385-1.167,7.292-0.413,9.994,2.295c3.78,3.777,3.78,9.9,0,13.679c-3.78,3.78-9.901,3.78-13.683,0c-2.842-2.844-3.545-7.019-2.105-10.521L68.578,47.933l-0.002,34.341c0.922,0.455,1.791,1.063,2.559,1.828c3.779,3.777,3.779,9.898,0,13.683c-3.779,3.777-9.904,3.777-13.679,0c-3.778-3.784-4.088-9.905-0.311-13.683C58.079,83.169,59,82.464,60,81.992V47.333c-1-0.472-1.92-1.172-2.856-2.111c-2.861-2.86-3.396-7.06-1.928-10.576L40.983,20.333L3.229,58.123c-3.175,3.177-3.155,8.325,0.02,11.5l55.126,55.114c3.173,3.174,8.325,3.174,11.503,0l54.86-54.858C127.913,66.703,127.916,61.552,124.742,58.378z"/>
</svg>
```
- Add css rules in your stylesheet
```css
2014-10-10 15:49:54 +02:00
.devicon-git-plain {
2014-10-10 15:38:03 +02:00
max-width: 2em;
}
/* if you want to change the original color */
2014-10-10 15:49:54 +02:00
.devicon-git-plain path {
2014-10-10 15:38:03 +02:00
fill: #4691f6;
}
```
2014-11-28 14:02:50 +01:00
#### Icons font
2014-10-10 15:38:03 +02:00
- Upload devicon.min.css and font files to your project
- Note: the `devicon.css` file is not the same as the `devicon.min.css`. It doesn't contain any colors or aliases.
2014-03-02 00:11:54 +01:00
2014-03-07 20:13:04 +01:00
```html
<link rel="stylesheet" href="devicon.min.css">
2014-10-10 15:38:03 +02:00
```
2018-05-05 23:39:48 +05:30
- Add icon using `<i>` tag
2014-10-10 15:38:03 +02:00
```html
2014-03-07 20:13:04 +01:00
<!-- for git plain version -->
<i class="devicon-git-plain"></i>
2014-10-10 15:38:03 +02:00
2014-03-07 20:13:04 +01:00
<!-- for git plain version with wordmark -->
<i class="devicon-git-plain-wordmark"></i>
2014-10-10 15:38:03 +02:00
<!-- for git plain version colored with git main color (devicon-color.css or devicon.min.css required) -->
2014-07-21 09:22:58 +02:00
<i class="devicon-git-plain colored"></i>
2014-10-10 15:38:03 +02:00
<!-- for git plain version with wordmark colored with git main color (devicon-color.css or devicon.min.css required) -->
2014-07-21 09:24:17 +02:00
<i class="devicon-git-plain-wordmark colored"></i>
2014-03-07 20:13:04 +01:00
```
2014-03-02 00:11:54 +01:00
2015-06-18 09:49:03 +02:00
##### NPM and Bower packages
2015-06-18 08:25:11 +02:00
2015-06-18 09:49:03 +02:00
You can install devicon as a dependency to your project either with NPM or Bower
2015-06-18 08:25:11 +02:00
```
2015-06-18 09:49:03 +02:00
// NPM
2015-06-18 08:25:11 +02:00
npm install --save devicon
2015-06-18 09:49:03 +02:00
// Bower
bower install --save devicon
2015-06-18 08:25:11 +02:00
```
2015-05-09 09:06:06 +02:00
<sub>Final font is build with [Icomoon app](https://icomoon.io/)</sub>
2020-07-24 08:57:54 +02:00
##### See the [devicon.json file](https://github.com/devicons/devicon/blob/master/devicon.json) or [devicon website](https://devicons.github.io/devicon/) for complete and up to date reference of icon's available versions.
## Contribute
2020-07-24 08:57:54 +02:00
Please have a look at the [CONTRIBUTING.md](https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md) file
2015-05-09 09:06:06 +02:00
2020-07-24 08:57:54 +02:00
Under [MIT Licence](https://github.com/devicons/devicon/blob/master/LICENSE)
2015-05-09 09:07:22 +02:00
<sub>All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.</sub>
## Go build yourself
### Prerequisites
Install gulp (and gulp plugins)
```bash
npm install
```
### Build the font and export stylesheet
Open [icomoon app](https://icomoon.io/app/#/select) and import [icomoon.json](icomoon.json). Choose _yes_ when beeing asked
if you like to restore the settings stored in the configuration file.
The next step is to click on **Generate font** and download the resulting archive. Extract it
contents and you will find a [fonts](./fonts) directory next to a `style.css`. Replace the content of the `fonts` folder,
rename the `style.css` to [devicon.css](./devicon.css) and follow the next step to build the final stylesheet.
### Build and minify stylesheet
Run the following command to build the resulting file `devicon.min.css`
```bash
npm run build-css
```