From f2145c2aa87bfd784ce7eb872b15246d2d270bb5 Mon Sep 17 00:00:00 2001 From: Clemens Bastian <8781699+amacado@users.noreply.github.com> Date: Sun, 21 Feb 2021 23:12:45 +0100 Subject: [PATCH] redesign readme.md (#496) * update readme for a fresher look * add target="blank" and links to badges * add more badges * replace depreceated bower with yarn * fix typo in headline --- README.md | 220 +++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 150 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index e8101010..f9eaf40e 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,129 @@ -# Devicon v2 +

+ + GitHub release (latest by semver) + + + GitHub + + + GitHub contributors + + + GitHub branch checks state + + + GitHub issues by-label + + + GitHub Repo stars + +

+
+
+ + Devicon Logo + +
+ devicon aims to gather all logos representing development languages and tools. +
+

+ Demo + · + Request Icon + · + Contribute +

+
-[https://devicons.github.io/devicon/](https://devicons.github.io/devicon/) +

TL;DR;

-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. +```html + + -Devicon has 80+ icons and 200+ versions. And it's growing! + + +``` -See all available icons on the [new website](https://devicons.github.io/devicon/). +

Table of Contents

+
    +
  1. About the project
    2. +
  2. Getting started
    3. +
  3. Requesting icon
    4. +
  4. Contributing
    5. +
  5. Go build yourself
    6. +
-## 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. +

About the project

+

+ 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!
+

+

+ See the devicon.json or our website for complete and up to date reference of + all available icons. +

+ + 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. + -## How to use -For a super fast setup go check [https://devicons.github.io/devicon/](https://devicons.github.io/devicon/) +

Getting started

+

+ For a super fast setup go check devicon.dev.
+ You can either use the raw svg icons or our devicon font (which is + also available via CDN). +

-_2 ways of using devicon:_ +

Use the devicon font (recommended)

+

+ You can install devicon as a dependency to your project either with npm or yarn: +

-#### SVG icons +```bash +npm install --save devicon +yarn add devicon +``` -- 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) +

+ If you don't want to use a package manager you can also download + and include devicon.min.css next to the font files to your project. + See devicon.dev for details about how to add devicon to your project via + a CDN. +

+

+ After setting up you just have to include the stylesheet in your header + to get started: +

+ +```html + +``` + +

Start using icons with <i>-tag

+ +```html + + + + + + + + + + + +``` + +

+ An alternate way to use devicon is by copy/paste the raw svg code + to your project. +

+

Copy/paste svg code (from the svg folder or the project page

```html @@ -29,7 +132,7 @@ _2 ways of using devicon:_ ``` -- Add css rules in your stylesheet +Add css rules in your stylesheet ```css .devicon-git-plain { max-width: 2em; @@ -41,71 +144,48 @@ _2 ways of using devicon:_ } ``` -#### Icons font +

Requesting icon

+

+ When you want to request a icon please feel feel to create a issue. See our contribution guidelines for more information. +

-- 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. +

Contributing

+

+ We are happy for every contribution. Please have a look at our contribution guidelines + to see how you can contribute to this project. +

-```html - -``` +

Go build yourself

+

+ Feel free to follow those steps when you want to build the font + by yourself. +

+
Prerequisites
+

Install gulp (and gulp plugins)

-- Add icon using `` tag - -```html - - - - - - - - - - - -``` - -##### NPM and Bower packages - -You can install devicon as a dependency to your project either with NPM or Bower - -``` - // NPM - npm install --save devicon - - // Bower - bower install --save devicon -``` - -Final font is build with [Icomoon app](https://icomoon.io/) - -##### 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 - -Please have a look at the [CONTRIBUTING.md](https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md) file - -Under [MIT Licence](https://github.com/devicons/devicon/blob/master/LICENSE) - -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. - -## 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 + +
Build the font and export stylesheet
+Open icomoon.io and import 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. +The next step is to click on Generate font and download the resulting archive. Extract it +contents and you will find a fonts directory next to a style.css. Replace the content of the fonts folder, +rename the style.css to 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 +

-### Build and minify stylesheet -Run the following command to build the resulting file `devicon.min.css` ```bash npm run build-css ``` + +
+
+ + +