mirror/devicon
1
0
Fork 0
mirror of https://github.com/konpa/devicon.git synced 2025-08-18 12:21:36 +02:00
Code Issues Releases Wiki Activity

Cleanup and fix path

Browse Source
This commit is contained in:
David Leal
2023-02-08 01:35:54 +00:00
parent b4d45674eb
commit 95bdb52154
2 changed files with 56 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
README.md
View File

@@ -217,13 +217,12 @@ Follow these steps to build the website and icons either locally or using <a hre
<li><a href="#web-server">Setting up the web server</a></li>
</ol>
<h4 id="using-gitpod">Using Gitpod.io</h4>
<p>By using <a href=https://www.gitpod.io)>Gitpod.io</a>, you can easily build the icons<br>and install the required dependencies in one single click. No extra setup is required.</p>
<h3 id="using-gitpod">Using Gitpod.io</h3>
<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>
<h4 id="installation">Installation</h4>
<h5>Forking and cloning the repository</5>
<h3 id="installation">Installation</h3>
<p><a href=https://github.com/devicons/devicon/fork>Fork</a> the repository and clone the forked repository.</p>
@@ -233,7 +232,7 @@ git clone https://github.com/<your-github-username>/devicon.git
<p>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.</p>
<h5>Install all the necessary NPM dependencies</h5>
<h4>Install all the necessary NPM dependencies</h4>
<p>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.<p>
@@ -241,9 +240,9 @@ git clone https://github.com/<your-github-username>/devicon.git
npm install
```
<h5>Installing Mozilla Firefox</h5>
<h4>Installing Mozilla Firefox</h4>
<p>Install on Linux-based systems using <icode>sudo</icode></p>
<p>Install on Linux-based systems using <code>sudo</code></p>
```bash
sudo apt-get install firefox
@@ -251,9 +250,9 @@ sudo apt-get install firefox
<p>Install Mozilla Firefox on Windows: https://support.mozilla.org/en-US/kb/how-install-firefox-windows</p>
<h5>Installing Python3</h5>
<h4>Installing Python3</h4>
<p>Install Python3 using the <icode>sudo</icode> command.</p>
<p>Install Python3 using the <code>sudo</code> command.</p>
```bash
sudo apt-get install python3
@@ -263,7 +262,7 @@ sudo apt-get install python3
</br>
For a more detailed guide on installing Python, check <a href="https://www.digitalocean.com/community/tutorials/install-python-windows-10">this tutorial</a> built by the DigitalOcean community.</p>
<h5>Setting up Selenium</h5>
<h4>Setting up Selenium</h4>
<p>Install Selenium in both Linux-based and Windows sytems.</p>
@@ -271,7 +270,7 @@ For a more detailed guide on installing Python, check <a href="https://www.digit
python3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1
```
<h4 id="building-icons">Build the new icons</h4>
<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>
@@ -291,7 +290,7 @@ python3 ./.github/scripts/icomoon_build_githubless.py ./.github/scripts/build_as
<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>
<h4 id="build-css">Build the CSS stylesheet</h4>
<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>
@@ -300,20 +299,22 @@ This file is used to show all the new icons previously built.</p>
npm run build-css
```
<h4 id="web-server">Setting up the web server</h4>
<h3 id="web-server">Setting up the web server</h3>
<p>Feel free to either open the `docs/index.html` file, or run the following command to run the Python web server.</p>
<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>.
<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>.</p>
<br/>
<div align="center">
<img src="https://forthebadge.com/images/badges/built-with-love.svg" />

52
docs/index.html
View File

@@ -39,6 +39,9 @@
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="Devicon aims to gather all logos representing development languages and tools in one font. 🚀" />
<script>
/////////////////////////////
// Basic helper functions //
/////////////////////////////
function addCss(href) {
var link = document.createElement('link');
@@ -50,6 +53,24 @@
document.head.appendChild(link);
}
function addImage(src, id, img_class) {
var img = document.createElement("img");
img.src = src;
img.alt = "{{selectedIcon.name}}-{{svgVersion}}";
img.classList.add(img_class);
document.getElementById(id).appendChild(img);
}
// Unused. May be useful in the future.
function addElement(content, id) {
document.getElementById(id).innerHTML = content;
}
///////////////////////
// Path management //
/////////////////////
var path = '/devicon.min.css';
var baseUrl
@@ -57,7 +78,7 @@
xhr.open('HEAD', path, false);
xhr.send();
// Make sure the file exists, otherwise, use CDN link.
// Make sure the file exists, otherwise, use latest CDN link.
if (xhr.status == "404") {
baseUrl = `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/`;
} else {
@@ -68,7 +89,10 @@
var counter = 0
var timer = setInterval(function() {
++counter;
addCss(`${baseUrl}devicon.min.css`);
addImage(`${baseUrl}icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg`, "svg-list", 'svgLogo');
if (counter == 1) {
clearInterval(timer);
}
@@ -121,10 +145,9 @@
</span>
</p>
<div class="cde" id='headerLinkCode'>
&lt;link rel="stylesheet" href="/devicon.min.css"&gt;
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"&gt;
</div>
<!-- Aquí esta mal el código ._. -->
<ul class="icons-list">
<div ng-repeat="fontVersion in selectedIcon.font">
<li ng-click="selectFont(fontVersion, false, $index)" ng-class="{'selected-version' : ($index == selectedFontIndex && !colored)}" ng-style="{'background-color': fontBackground}">
@@ -169,9 +192,13 @@
</span>
</h4>
<ul class="icons-list">
<li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}" ng-style="{'background-color': svgBackground}">
<img src="assets/img/checkerboard.png" ng-style="{'visibility': svgDisplayCheckerboard ? 'visible' : 'hidden'}">
<img class='svgLogo' ng-src="../icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
<li id="svg-list" ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}" ng-style="{'background-color': svgBackground}">
<img src="./assets/img/checkerboard.png" ng-style="{'visibility': svgDisplayCheckerboard ? 'visible' : 'hidden'}">
<!--
The image is added in the JS script above. This is needed for the correct location link.
<img class='svgLogo' src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
-->
</li>
</ul>
<p>
@@ -182,7 +209,7 @@
</span>
</p>
<div class="cde" id='imgCode'>
&lt;img src="./icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
&lt;img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
</div>
<p><i>*To change the size, change the &lt;img&gt;'s <code>`height`</code> and <code>`width`</code>.</i></p>
@@ -206,6 +233,7 @@
<h3>GitHub repository</h3>
<h5>If you prefer a local install, you can download all the files on the GitHub repository.</h5>
<h5>Check out our <a href=https://github.com/devicons/devicon#building-devicon>ultimate guide</a> in order to compile Devicon locally.</h5>
<p class="buttonLink">
<a href="https://github.com/devicons/devicon/archive/master.zip"><i class="devicon-github-original"></i>DOWNLOAD</a>
</p>
@@ -216,18 +244,18 @@
<a href="https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md" target="blank"><i class="devicon-github-original"></i>CONTRIBUTE</a>
</p>
<p class="buttonLink">
<a href="https://discord.gg/hScy8KWACQ" target="blank"><i class="discord-logo"></i>DISCORD SERVER</a>
<a href="https://discord.gg/hScy8KWACQ" target="blank"><i class="discord-logo"></i>DISCORD COMMUNITY</a>
</p>
<h3>Contact</h3>
<h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us at <b><a href="mailto:info@devicon.dev">info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
<h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us via <b><a href="mailto:info@devicon.dev">info@devicon.dev</a> or our <a href="https://discord.gg/hScy8KWACQ" target="blank">Discord community</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
<footer>
Originally created by <a href="https://github.com/konpa">Konpa</a> (under <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />
supported by various <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
Originally created by <a href="https://github.com/konpa">Konpa</a> (under the <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />
supported by many <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
Copyright &copy; 2015 <a href="https://github.com/konpa">Konpa</a><br />
<br />
Final font build with <a href="https://icomoon.io/">Icomoon</a><br />
Final font built with <a href="https://icomoon.io/">IcoMoon</a><br />
<br>
<i>*All product names, logos, and brandsare property of their respective owners. All company, product and service names used in this website are for identification purposes only. Usage of these names, logos, and brands does not imply endorsement of Devicon or its members. All icons/SVGs in this project are not monetized in anyway. It is up to the user to use the logo properly according to the company/group's brand policy. Usage of this site or any icons/SVGs from Devicon means acknowledgement of these conditions.</i>
</footer>