You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -81,6 +81,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
81
81
<li>Each <code>.svg</code> file contains one version of an icon in a <code>0 0 128 128</code> viewbox. You can use a service like <ahref="https://www.iloveimg.com/resize-image/resize-svg">resize-image</a> for scaling the svg.</li>
82
82
<li>The <code>svg</code> element does not need the <code>height</code> and <code>width</code> attributes. However, if you do use it, ensure their values are either <code>"128"</code> or <code>"128px"</code>. Ex: <code>height="128"</code></li>
83
83
<li>Each <code>.svg</code> must use the <code>fill</code> attribute instead of using <code>classes</code> for colors. See <ahref="https://github.com/devicons/devicon/issues/407">here</a> for more details.</li>
84
+
<li>The naming convention for the svg file is the following: <code>(Icon name)-(original|plain|line)(-wordmark?).</code></li>
84
85
</ul>
85
86
86
87
<hr>
@@ -259,4 +260,5 @@ As an example, let's assume you have created the svgs for Redhat and Amazon Web
259
260
<li>Ensure code quality is up to standard</li>
260
261
<li>Upload svgs to <ahref="https://icomoon.io/app/#/select">icomoon.io</a> and take a screenshot to check that it looks good.
261
262
<li>Comment on the PR so maintainers don't have to manually upload icon result.</li>
263
+
<li>Publishing a new release to <ahref="https://www.npmjs.com/package/devicon">npm</a>; See <ahref="https://github.com/devicons/devicon/issues/288">#288</a></li>
Devicon aims to gather all logos representing development languages and tools.
60
+
Each icon comes in several versions: font/svg, original/plain/line, colored/not colored, wordmark/no wordmark.
61
+
Devicon has 150+ icons. And it's growing!<br />
62
+
</p>
63
+
<p>
64
+
See the <a href="/devicon.json">devicon.json</a> or <a href="https://devicon.dev">our website</a> for complete and up to date reference of
65
+
all available icons.
66
+
</p>
67
+
<sub>
68
+
All product names, logos, and brands are property of their respective owners. All company, product and service
69
+
names used in this website are for identification purposes only. Use of these names, logos, and brands does not
70
+
imply endorsement.
71
+
</sub>
72
+
73
+
74
+
<h2id="getting-started">Getting started</h2>
75
+
<p>
76
+
For a super fast setup go check <a href="https://devicon.dev">devicon.dev</a>.<br />
77
+
You can either <a href="#getting-started-svg">use the raw svg</a> icons or our <a href="#getting-started-font">devicon font</a> (which is
78
+
also available via CDN).
79
+
</p>
80
+
81
+
<h4id="getting-started-font">Use the <code>devicon</code> font (recommended)</h4>
82
+
<p>
83
+
You can install devicon as a dependency to your project either with <code>npm</code> or <code>yarn</code>:
84
+
</p>
9
85
10
-
See all available icons on the [new website](https://devicons.github.io/devicon/).
86
+
```bash
87
+
npm install --save devicon
88
+
yarn add devicon
89
+
```
11
90
12
-
## Icon requests
13
-
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.
91
+
<p>
92
+
If you don't want to use a package manager you can also download
93
+
and include <a href="/devicon.min.css">devicon.min.css</a> next to the <a href="/fonts">font files</a> to your project.
94
+
See <a href="https://devicon.dev">devicon.dev</a> for details about how to add devicon to your project via
95
+
a CDN.
96
+
</p>
97
+
<p>
98
+
After setting up you just have to include the stylesheet in your header
99
+
to get started:
100
+
</p>
14
101
15
-
## How to use
102
+
```html
103
+
<linkrel="stylesheet"href="devicon.min.css">
104
+
```
105
+
106
+
<p>Start using icons with <code><i></code>-tag</p>
107
+
108
+
```html
109
+
<!-- for git plain version -->
110
+
<iclass="devicon-git-plain"></i>
16
111
17
-
For a super fast setup go check [https://devicons.github.io/devicon/](https://devicons.github.io/devicon/)
112
+
<!-- for git plain version with wordmark -->
113
+
<iclass="devicon-git-plain-wordmark"></i>
18
114
19
-
_2 ways of using devicon:_
115
+
<!-- for git plain version colored with git main color (devicon-color.css or devicon.min.css required) -->
116
+
<iclass="devicon-git-plain colored"></i>
20
117
21
-
#### SVG icons
118
+
<!-- for git plain version with wordmark colored with git main color (devicon-color.css or devicon.min.css required) -->
119
+
<iclass="devicon-git-plain-wordmark colored"></i>
120
+
```
22
121
23
-
- 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)
122
+
<p>
123
+
An alternate way to use <code>devicon</code> is by copy/paste the raw svg code
124
+
to your project.
125
+
</p>
126
+
<h4id="getting-started-svg">Copy/paste svg code (from the <ahref="https://github.com/devicons/devicon/tree/master/icons">svg folder</a> or the <ahref="https://devicon.dev">project page</a></h4>
24
127
25
128
```html
26
129
<!-- for git plain version -->
@@ -29,7 +132,7 @@ _2 ways of using devicon:_
29
132
</svg>
30
133
```
31
134
32
-
-Add css rules in your stylesheet
135
+
Add css rules in your stylesheet
33
136
```css
34
137
.devicon-git-plain {
35
138
max-width: 2em;
@@ -41,71 +144,48 @@ _2 ways of using devicon:_
41
144
}
42
145
```
43
146
44
-
#### Icons font
45
-
46
-
- Upload devicon.min.css and font files to your project
47
-
- Note: the `devicon.css` file is not the same as the `devicon.min.css`. It doesn't contain any colors or aliases.
48
-
49
-
```html
50
-
<linkrel="stylesheet"href="devicon.min.css">
51
-
```
52
-
53
-
- Add icon using `<i>` tag
54
-
55
-
```html
56
-
<!-- for git plain version -->
57
-
<iclass="devicon-git-plain"></i>
58
-
59
-
<!-- for git plain version with wordmark -->
60
-
<iclass="devicon-git-plain-wordmark"></i>
61
-
62
-
<!-- for git plain version colored with git main color (devicon-color.css or devicon.min.css required) -->
63
-
<iclass="devicon-git-plain colored"></i>
64
-
65
-
<!-- for git plain version with wordmark colored with git main color (devicon-color.css or devicon.min.css required) -->
66
-
<iclass="devicon-git-plain-wordmark colored"></i>
67
-
```
68
-
69
-
##### NPM and Bower packages
70
-
71
-
You can install devicon as a dependency to your project either with NPM or Bower
72
-
73
-
```
74
-
// NPM
75
-
npm install --save devicon
76
-
77
-
// Bower
78
-
bower install --save devicon
79
-
```
80
-
81
-
<sub>Final font is build with [Icomoon app](https://icomoon.io/)</sub>
82
-
83
-
##### 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.
84
-
85
-
## Contribute
86
-
87
-
Please have a look at the [CONTRIBUTING.md](https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md) file
88
-
89
-
Under [MIT Licence](https://github.com/devicons/devicon/blob/master/LICENSE)
147
+
<h2id="request-icon">Requesting icon</h2>
148
+
<p>
149
+
When you want to request a icon please feel feel to create a issue. See our <a href="/CONTRIBUTING.md#requestingIcon">contribution guidelines</a> for more information.
150
+
</p>
151
+
152
+
<h2id="contribute">Contributing</h2>
153
+
<p>
154
+
We are happy for every contribution. Please have a look at our <a href="CONTRIBUTING.md#overview-on-submitting-icons">contribution guidelines</a>
155
+
to see how you can contribute to this project.
156
+
</p>
157
+
158
+
<h2id="build-yourself">Go build yourself</h2>
159
+
<p>
160
+
Feel free to follow those steps when you want to build the font
161
+
by yourself.
162
+
</p>
163
+
<h5>Prerequisites</h5>
164
+
<p>Install gulp (and gulp plugins)</p>
90
165
91
-
<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>
92
-
93
-
## Go build yourself
94
-
### Prerequisites
95
-
Install gulp (and gulp plugins)
96
166
```bash
97
167
npm install
98
168
```
99
-
### Build the font and export stylesheet
100
-
Open [icomoon app](https://icomoon.io/app/#/select) and import [icomoon.json](icomoon.json). Choose _yes_ when beeing asked
169
+
170
+
<h5>Build the font and export stylesheet</h5>
171
+
Open <ahref="https://icomoon.io/app/#/select">icomoon.io</a> and import <ahref="/icomoon.json">icomoon.json</a>. Choose <i>yes</i> when beeing asked
101
172
if you like to restore the settings stored in the configuration file.
102
173
103
-
The next step is to click on **Generate font** and download the resulting archive. Extract it
104
-
contents and you will find a [fonts](./fonts) directory next to a `style.css`. Replace the content of the `fonts` folder,
105
-
rename the `style.css` to [devicon.css](./devicon.css) and follow the next step to build the final stylesheet.
174
+
The next step is to click on <b>Generate font</b> and download the resulting archive. Extract it
175
+
contents and you will find a <ahref="/fonts">fonts</a> directory next to a <code>style.css</code>. Replace the content of the <code>fonts</code> folder,
176
+
rename the <code>style.css</code> to <ahref="/devicon.css">devicon.css</a> and follow the next step to build the final stylesheet.
177
+
178
+
<h5>Build and minify stylesheet</h5>
179
+
<p>
180
+
Run the following command to build the resulting file <code>devicon.min.css</code>
181
+
</p>
106
182
107
-
### Build and minify stylesheet
108
-
Run the following command to build the resulting file `devicon.min.css`
0 commit comments