mirror of
https://github.com/konpa/devicon.git
synced 2025-08-17 20:01:38 +02:00
Updated CONTRIBUTING for naming convention
This commit is contained in:
@@ -22,9 +22,10 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
|||||||
<h2 id="terms">Terms</h2>
|
<h2 id="terms">Terms</h2>
|
||||||
<p>Here are some terms that we will use in this repo: </p>
|
<p>Here are some terms that we will use in this repo: </p>
|
||||||
<ol>
|
<ol>
|
||||||
<li>"Icon" refers to the set of svgs/icons of a technology/tool. Ex: We might refer to the React svgs and React icons as the React Icon</li>
|
<li>"Technology" is used to describe a software, libraries, tool, etc...</li>
|
||||||
<li>"SVG/<code>.svg</code>" refers to the <code>svg</code> versions of the Icons.</li>
|
<li>"Icon" refers to the svgs and icons version of a technology as a whole.</i>
|
||||||
<li>"icons" (lowercase) refers to the font icon versions of the Icons.</li>
|
<li>"SVG/<code>svg</code>" refers to the <code>svg</code> versions of the Icons.</li>
|
||||||
|
<li>"icon" (lowercase) refers specficially to the font icon versions of the Icons.</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
@@ -49,9 +50,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
|||||||
<li>AngularJS becomes <code>angularjs</code> or just <code>angular</code></li>
|
<li>AngularJS becomes <code>angularjs</code> or just <code>angular</code></li>
|
||||||
<li>Amazon Web Services becomes <code>amazonwebservices</code></li>
|
<li>Amazon Web Services becomes <code>amazonwebservices</code></li>
|
||||||
<li>Microsoft SQL Server becomes <code>microsoftsqlserver</code></li>
|
<li>Microsoft SQL Server becomes <code>microsoftsqlserver</code></li>
|
||||||
<li><i>Note:</i>For JS libraries, you can also remove the "js" part if it's still recognizable.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<br>
|
|
||||||
|
|
||||||
<p>Each icon/svg can come in different versions. So far, we have:</p>
|
<p>Each icon/svg can come in different versions. So far, we have:</p>
|
||||||
<ul>
|
<ul>
|
||||||
@@ -75,7 +74,6 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
|||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
Some icons are really simple (ex. Apple), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make one of the version (either "original" or "plain"). You can then add an alias in the <code>devicon.json</code> so they can be found with either the "original" or "plain" naming convention. Note: this only applies to font icon versions only, not the SVG versions.
|
Some icons are really simple (ex. Apple), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make one of the version (either "original" or "plain"). You can then add an alias in the <code>devicon.json</code> so they can be found with either the "original" or "plain" naming convention. Note: this only applies to font icon versions only, not the SVG versions.
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@@ -84,7 +82,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
|||||||
<p>Before you submit your logos/svgs, please ensure that they meet the following standard:</p>
|
<p>Before you submit your logos/svgs, please ensure that they meet the following standard:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>The background must be transparent.</li>
|
<li>The background must be transparent.</li>
|
||||||
<li>The svg name follows this convention: <code>(Icon name)-(original|plain|line)(-wordmark?).</code></li>
|
<li>The svg name follows this convention: <code>(Technology name)-(original|plain|line)(-wordmark?).</code></li>
|
||||||
<li>The <b>plain</b> and <b>line</b> versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united. We will strip the color when turning it into icons so they can have any color.
|
<li>The <b>plain</b> and <b>line</b> versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united. We will strip the color when turning it into icons so they can have any color.
|
||||||
</li>
|
</li>
|
||||||
<li>Optimize/compress your SVGs. You can use a service like <a href="https://compressor.io/">compressor</a> or <a href="https://petercollingridge.appspot.com/svg-editor">SVG Editor</a>.</li>
|
<li>Optimize/compress your SVGs. You can use a service like <a href="https://compressor.io/">compressor</a> or <a href="https://petercollingridge.appspot.com/svg-editor">SVG Editor</a>.</li>
|
||||||
@@ -92,7 +90,7 @@ First of all, thanks for taking the time to contribute! This project can only gr
|
|||||||
<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 <a href="https://www.iloveimg.com/resize-image/resize-svg">resize-image</a> for scaling the svg.</li>
|
<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 <a href="https://www.iloveimg.com/resize-image/resize-svg">resize-image</a> for scaling the svg.</li>
|
||||||
<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>
|
<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>
|
||||||
<li>Each <code>.svg</code> must use the <code>fill</code> attribute instead of using <code>classes</code> for colors. See <a href="https://github.com/devicons/devicon/issues/407">here</a> for more details.</li>
|
<li>Each <code>.svg</code> must use the <code>fill</code> attribute instead of using <code>classes</code> for colors. See <a href="https://github.com/devicons/devicon/issues/407">here</a> for more details.</li>
|
||||||
<li>The naming convention for the svg file is the following: <code>(Icon name)-(original|plain|line)(-wordmark?).</code></li>
|
<li>The naming convention for the svg file is the following: <code>(Technology name)-(original|plain|line)(-wordmark?).</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
Reference in New Issue
Block a user