mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-09-02 19:02:46 +02:00
Code Issues Releases Wiki Activity

Major build improvements (#1668)

Browse Source 
* Major build improvements

* Cleanup and fix path

* chore: apply suggestions from code review

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Remove `selenium` from the NPM dependencies

* Revert `nano` icon changes

* Use quote notes

* Update

* chore: apply suggestions from code review

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>

* Snailedlt/improve build changes (#187)

* Make README more readable

* move logic from index.html to script.js

* fix devicon min css in head

* Fix build script missing token error

* Add more print statements to local build script

* Change from ng-href to href in code view

* Minor readme improvements

---------

Co-authored-by: David Leal <halfpacho@gmail.com>

---------

Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>
This commit is contained in:
David Leal
2023-04-21 08:46:43 -06:00
committed by GitHub
parent c97a0bb00a
commit b6e387d942
21 changed files with 2403 additions and 2093 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
README.md
View File

@@ -57,17 +57,17 @@
<li><a href="#discord-community">Discord Community</a></li>
<li><a href="#develop-vs-master"><code>develop</code> vs <code>master</code></a></li>
<li><a href="#stale-prs">Stale Pull Requests</a></li>
<li><a href="#build-yourself">Go Build Yourself</a></li>
<li><a href="#building-devicon">Building Devicon</a></li>
</ol>
<h2 id="about">About the Project</h2>
<p>
Devicon aims to gather all logos representing development languages and tools.
Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark.
Devicon has 150+ icons. And it's growing!<br />
Devicon has 150+ icons. And it's growing!<br/>
</p>
<p>
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
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
all available icons.
</p>
@@ -76,20 +76,19 @@
</p>
<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
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. Usage of these logos should be done according to the company/brand/service's brand policy.
</sub>
<h2 id="getting-started">Getting Started</h2>
<p>
For a super fast setup go check <a href="https://devicon.dev">devicon.dev</a>.<br />
You can either use the <a href="#getting-started-svg">raw SVG</a> icons or our <a href="#getting-started-font">devicon font</a> (which is
also available via CDN).
For a super fast setup, go check <a href="https://devicon.dev">devicon.dev</a>.<br />
You can either use the <a href="#getting-started-svg">raw SVG</a> icons, our <a href="#getting-started-font">Devicon font</a> (which is
also available via <a href=https://www.jsdelivr.com/package/npm/devicon>CDN</a>), or by <a href=#building-devicon>building Devicon</a> yourself.
</p>
<h4 id="getting-started-font">Use the <code>devicon</code> font (recommended)</h4>
<h3 id="getting-started-font">Use the <code>devicon</code> font (recommended)</h3>
<p>
You can install devicon as a dependency to your project either with <code>npm</code> or <code>yarn</code>:
</p>
@@ -134,7 +133,7 @@ yarn add devicon
An alternate way to use <code>devicon</code> is by copy/pasting the raw SVG code
to your project.
</p>
<h4 id="getting-started-svg">Copy/paste SVG code (from the <a href="https://github.com/devicons/devicon/tree/master/icons">SVG folder</a> or the <a href="https://devicon.dev">project page</a>):</h4>
<h3 id="getting-started-svg">Copy/paste SVG code (from the <a href="https://github.com/devicons/devicon/tree/master/icons">SVG folder</a> or the <a href="https://devicon.dev">project page</a>):</h3>
```html
<!-- for devicon plain version -->
@@ -157,7 +156,7 @@ Add the following CSS rules in your stylesheet:
<h4>You can also use the <code>img</code> tag and reference an SVG directly from the repository:</h4>
```html
<img src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/devicon/devicon-original.svg'>
<img src='https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg'>
```
<h2 id="request-icon">Requesting an icon</h2>
@@ -177,7 +176,7 @@ We have a Discord community for Devicons. You can easily request icons, discuss,
<h2 id="develop-vs-master"><code>develop</code> vs <code>master</code></h2>
<p>
All official releases shall be in <code>master</code>. Any updates in between (icons, features, etc.) will be kept in <code>develop</code>.
All official releases shall be in <code>master</code>. Any updates in between (icons, features, etc.) will be kept in <code>develop</code>.
</p>
<b><code>develop</code> contains:</b>
<ul>
@@ -185,7 +184,8 @@ All official releases shall be in <code>master</code>. Any updates in between (i
Latest SVGs (non-optimized).
</li>
<li>
No icons for the latest SVGs. These will be build at every release.
No icons for the latest SVGs. These will be built at every release.<br>
Can be built manually. See <a href="#building-devicon"><i>Building Devicon</i></a>.
</li>
<li>
Experimental changes.
@@ -194,10 +194,10 @@ All official releases shall be in <code>master</code>. Any updates in between (i
<b><code>master</code> contains:</b>
<ul>
<li>
Latest official release, which contains the SVGs and icons.
Latest official release, which contains all the SVGs and icons.
</li>
<li>
Official tested changes.
Official, tested changes.
</li>
</ul>
@@ -206,34 +206,110 @@ All official releases shall be in <code>master</code>. Any updates in between (i
After a pull request has been open for over 30 days with no activity or response from the author, it'll be automatically marked as stale. We might fork your changes and merge the changes ourselves. Since GitHub tracks contributions by commits, you will be credited.
</p>
<h2 id="build-yourself">Go Build Yourself</h2>
<h2 id="building-devicon">Building Devicon</h2>
<p>
Feel free to follow these steps when you want to build the font
by yourself.
Follow these steps to build the website and icons either locally or using <a href=https://www.gitpod.io>Gitpod.io</a>.
</p>
<h5>Prerequisites</h5>
<p>Install <code>gulp</code> (and <code>gulp</code> plugins)</p>
<h3>Table of contents</h3>
<ol>
<li><a href="#using-gitpod">Using Gitpod to build</a></li>
<li><a href="#local-installation">Local Installation</a></li>
<ol>
<li><a href="#install-dependencies">Install dependencies</a></li>
<li><a href="#building-icons">Build the icons</a></li>
<li><a href="#build-css">Build the CSS stylesheet</a></li>
<li><a href="#web-server">Setting up the web server</a></li>
</ol>
</ol>
<h2 id="using-gitpod">Using Gitpod.io</h2>
<p>By using <a href=https://www.gitpod.io)>Gitpod.io</a>, you can easily build the icons and install the<br>required dependencies in one single click. No extra setup is required.</p>
<a href=https://gitpod.io/#https://github.com/devicons/devicon/tree/develop><img src=https://gitpod.io/button/open-in-gitpod.svg alt="Open in Gitpod"></img></a>
> **Note**
> In case some of the commands are not properly ran, you can\
> follow the steps below and run the same commands on Gitpod.io
<h2 id="local-installation">Local Installation</h3>
<h3 id="install-dependencies">Install dependencies</h3>
<p><a href=https://github.com/devicons/devicon/fork>Fork</a> the repository and clone the forked repository.</p>
```bash
git clone https://github.com/<your-github-username>/devicon.git
```
> **Note**
> In case you don't have Git installed, check the <a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">official guide</a> to install Git on your operating system.
<h3>Install all the necessary NPM dependencies</h3>
```bash
npm install
```
<h5>Build the font and export stylesheet</h5>
Open <a href="https://icomoon.io/app/#/select">icomoon.io</a> and import <a href="/icomoon.json">icomoon.json</a>. Choose <i>yes</i> when being asked
if you would like to restore the settings stored in the configuration file.
> **Note**
> In case you don't have NPM installed, check this <a href=https://kinsta.com/blog/how-to-install-node-js/><b>ultimate guide</b></a> on installing Node.js and NPM. These tools are required in order to build Devicon properly.
The next step is to click on <b>Generate font</b> and download the resulting archive. Extract the contents and you will find a <a href="/fonts">fonts</a> directory next to a <code>style.css</code>. Replace the contents of the <code>fonts</code> folder, rename <code>style.css</code> as <a href="/devicon.css">devicon.css</a> and follow the next step to build the final stylesheet.
<h3>Install Firefox</h3>
https://www.mozilla.org/en-US/firefox/new/
<h5>Build and minify stylesheet</h5>
<p>
Run the following command to build the resulting file <code>devicon.min.css</code>
</p>
<h3>Install Python 3.8</h3>
https://www.python.org/downloads/
> **Note**
> Make sure your Python install includes [pip](https://pypi.org/project/pip/)
<h3>Install Selenium</h3>
```bash
python3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1
```
<h3 id="building-icons">Build the new icons</h3>
<p>Once all the dependencies are installed, you can proceed to build the newest icons.<br>
Usually, this is done on each release, but you can have a sneak peek before a release.</p>
```bash
# Linux/Unix
npm run build-icons
# Windows
python3 ./.github/scripts/icomoon_build_githubless.py ./.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless
```
<i>The process might take a while, depending on your operating system's speed and the amount of icons.</i>
<p>If there are any errors shown, please let us know by <a href=https://github.com/devicons/devicon/issues/new/choose>creating an issue</a> or contacting us on our <a href=https://discord.gg/hScy8KWACQ>Discord community</a>.</p>
<h3 id="build-css">Build the CSS stylesheet</h3>
<p>Run the following command to build the new CSS stylesheet.<br>
This file is used to show all the new icons previously built.</p>
```bash
npm run build-css
```
<br />
<h3 id="web-server">Setting up the web server</h3>
<p>Run the following command to start the web server with Python.</p>
```bash
npm run dev # Will run on port 8000
```
<p>Or this command, which does exactly the same, but the port can be customized.</p>
```bash
python3 -m http.server <port>
```
<p>You're done now! :tada: Your build of Devicons should be available at <code>https://localhost:8000</code> (or the desired port).</p>
<br/>
<div align="center">
<img src="https://forthebadge.com/images/badges/built-with-love.svg" />
<img src="https://forthebadge.com/images/badges/built-by-developers.svg" />