{"id":15687286,"url":"https://github.com/lunatic-fox/deviconapi","last_synced_at":"2025-05-07T19:40:55.682Z","repository":{"id":61814263,"uuid":"553339589","full_name":"lunatic-fox/deviconapi","owner":"lunatic-fox","description":"API to change colors and size of Devicon icons.","archived":false,"fork":false,"pushed_at":"2023-02-13T05:36:11.000Z","size":2480,"stargazers_count":10,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T13:27:26.831Z","etag":null,"topics":["api","devicon","icon","vercel"],"latest_commit_sha":null,"homepage":"https://lunaticfox.vercel.app/deviconApi","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lunatic-fox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-18T04:14:47.000Z","updated_at":"2024-11-07T19:18:34.000Z","dependencies_parsed_at":"2024-10-23T20:36:56.950Z","dependency_job_id":"f30e1dfa-2cd3-4f5a-934b-d0451a9eb7a6","html_url":"https://github.com/lunatic-fox/deviconapi","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunatic-fox%2Fdeviconapi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunatic-fox%2Fdeviconapi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunatic-fox%2Fdeviconapi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunatic-fox%2Fdeviconapi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lunatic-fox","download_url":"https://codeload.github.com/lunatic-fox/deviconapi/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252945143,"owners_count":21829544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","devicon","icon","vercel"],"created_at":"2024-10-03T17:46:35.268Z","updated_at":"2025-05-07T19:40:55.660Z","avatar_url":"https://github.com/lunatic-fox.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Devicon API v1.1.0 ![](https://deviconapi.vercel.app/?devicon\u0026size=40)\n\n\u003ca href=\"#\"\u003e\n  \u003cimg src=\"https://shields.io/badge/English-000dff\"\u003e\n\u003c/a\u003e\n\u003ca href=\"docs/ptbr/README.md\"\u003e\n  \u003cimg src=\"https://shields.io/badge/Português%20do%20Brasil-008c15\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n---\n\u003cdiv align=\"center\"\u003e\n\n### [Devicon API - Interface](https://lunaticfox.vercel.app/deviconApi)\nAn interface page to select the icons.\n\u003c/div\u003e\n\n---\n\n\u0026emsp;This project serves [Devicon](https://github.com/devicons/devicon) v2.15.1 icons¹ via API, that way you can edit the icon color and size on the fly.\n\n\u003e 1. *Only icons that can be converted to font, in other words, only monochromatic plain icons.*\n\n## List of contents\n[**1. Overview**](#overview)\\\n\u0026emsp;[**1.1. Selecting icon**](#11-selecting-icon)\\\n\u0026emsp;[**1.2. Selecting theme or color**](#12-selecting-theme-or-color)\\\n\u0026emsp;\u0026emsp;[**1.2.1. theme**](#121-theme)\\\n\u0026emsp;\u0026emsp;[**1.2.2. color**](#122-color)\\\n\u0026emsp;[**1.3. Selecting version**](#13-selecting-version)\\\n\u0026emsp;[**1.4. Resizing**](#14-resizing)\\\n[**2. Examples**](#2-examples)\\\n\u0026emsp;[**2.1. Markdown**](#21-markdown)\\\n\u0026emsp;[**2.2. HTML**](#22-html)\\\n\u0026emsp;[**2.3. Results**](#23-results)\\\n[**3. Dependencies**](#3-dependencies)\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n## 1. Overview\n\u0026emsp;Use the base URL below to access the API.\n```https\nhttps://deviconapi.vercel.app/\n```\n\n\u003cdiv align=\"center\"\u003e\n\n**Through this documentation this base URL will be referred as `\u003cURL\u003e/`**\n\u003c/div\u003e\n\n[***Jump to examples \u003e\u003e***](#2-examples)\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 1.1. Selecting icon\n\u0026emsp;Just add the icon name after the base URL. If no other parameter is added it will return the default icon in its default color with 128×128px of size.\n\n***Example***\n```https\n\u003cURL\u003e/csharp\n\u003cURL\u003e/cplusplus\n\u003cURL\u003e/javascript\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 1.2. Selecting theme or color\n\u0026emsp;You can choose the color of the icon by adding the `theme` or `color` parameter, using `\u0026` after the icon name.\\\n\u0026emsp;Is important to note that `theme` has priority over `color` parameter, so if both are present only `theme` will work.\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 1.2.1. theme\n\u0026emsp;This parameter receives `light` or `dark` as value. \n\n\u0026emsp;In GitHub markdown you should use a wrapping logic. See the example below.\n\n***Example***\n```html\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://deviconapi.vercel.app/devicon?theme=dark\u0026size=50\"\u003e\n  \u003cimg alt=\"Devicon\" title=\"Devicon\" src=\"https://deviconapi.vercel.app/devicon?theme=light\u0026size=50\"\u003e\n\u003c/picture\u003e\n```\n\n***Result***\n\u003cdiv align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://deviconapi.vercel.app/devicon?theme=dark\u0026size=50\"\u003e\n    \u003cimg alt=\"Devicon\" title=\"Devicon\" src=\"https://deviconapi.vercel.app/devicon?theme=light\u0026size=50\"\u003e\n  \u003c/picture\u003e\n\u003c/div\u003e\n\n---\n\n\u0026emsp;A dark color scheme is defined in `source.media` and `srcset` points to a dark themed icon `#ffffff`. If `source.media` is false, then the inner `img` will be shown instead and `src` should be pointing to a light themed icon `#000000`.\n\n***Example using `dark`***\\\n\u0026emsp;Next.js icon filled in `#ffffff`\n```https\n\u003cURL\u003e/nextjs?theme=dark\n```\n\n***Example using `light`***\\\n\u0026emsp;Next.js icon filled in `#000000`\n```https\n\u003cURL\u003e/nextjs?theme=light\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 1.2.2. color\n\u0026emsp;This parameter receives any hexadecimal color and CSS colors as value.\n\n\u003cdiv align=\"center\"\u003e\n\n**Note that hexadecimal colors can not have `#` on the request!**\n\u003c/div\u003e\n\n\u0026emsp;Hexadecimal colors can be in any of the following patterns: `2ff`, `22ffff`, `abc5`, `aabbcc55`.\n\n***Example using hexadecimal***\\\n\u0026emsp;JavaScript icon filled in `#ff5656`\n```https\n\u003cURL\u003e/javascript?color=ff5656\n```\n\n***Example using CSS color***\\\n\u0026emsp;JavaScript icon filled in `#ff0000`\n```https\n\u003cURL\u003e/javascript?color=red\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 1.3. Selecting version\n\u0026emsp;Sometimes, icons are in different versions and you can specify which one you want by passing a version value to `version` parameter.\n\n\u0026emsp;Possible version values are: `original`, `plain`, `line`,`original-wordmark`, `plain-wordmark` and `line-wordmark`.\n\n\u003cdiv align=\"center\"\u003e\n\n**Remember that this API works only with monochromatic icons.**\\\n**You can see all supported versions of each icon in this [list](./docs/list-of-icons-and-versions/README.md).**\n\u003c/div\u003e\n\n***Example using `line`***\\\n\u0026emsp;Apache icon in `line` version where default is `plain`.\n```https\n\u003cURL\u003e/apache?version=line\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 1.4. Resizing\n\u0026emsp;If you are using Markdown you can resize the icon without add an `img` element with `width` attribute, for instance. Just add some value to the `size` parameter and you are ready to go.\n\n***Example using 50px***\\\n\u0026emsp;Node.js icon in 50×50px.\n```https\n\u003cURL\u003e/nodejs?size=50\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n## 2. Examples\n### 2.1. Markdown\n#### nodejs, dark theme, 80px\n```markdown\n![](https://deviconapi.vercel.app/nodejs?theme=dark\u0026size=80)\n```\n#### go, 180px, #f0f\n```markdown\n![](https://deviconapi.vercel.app/go?size=180\u0026color=f0f)\n```\n#### go, original-wordmark, 180px\n```markdown\n![](https://deviconapi.vercel.app/go?version=original-wordmark\u0026size=180)\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 2.2. HTML\n#### nodejs, dark theme, 80px\n```html\n\u003cimg src=\"https://deviconapi.vercel.app/nodejs?theme=dark\u0026size=80\"/\u003e\n```\n#### go, 180px, #f0f\n```html\n\u003cimg src=\"https://deviconapi.vercel.app/go?size=180\u0026color=f0f\"/\u003e\n```\n#### go, original-wordmark, 180px\n```html\n\u003cimg src=\"https://deviconapi.vercel.app/go?version=original-wordmark\u0026size=180\"/\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n### 2.3. Results\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eResult\u003c/th\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cb\u003enodejs\u003c/b\u003e\u003cbr\u003e\n        \u003cb\u003etheme:\u003c/b\u003e dark\u003cbr\u003e\n        \u003cb\u003esize:\u003c/b\u003e 80px\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg title=\"Node.js icon\" alt=\"nodejs\" src=\"https://deviconapi.vercel.app/nodejs?theme=dark\u0026size=80\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=2\u003e\n        \u003ci\u003ehttps://deviconapi.vercel.app/nodejs?theme=dark\u0026size=80\u003c/i\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eResult\u003c/th\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cb\u003egithub\u003c/b\u003e\u003cbr\u003e\n        \u003cb\u003ecolor:\u003c/b\u003e #2ea043\u003cbr\u003e\n        \u003cb\u003esize:\u003c/b\u003e 180px\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg title=\"GitHub icon\" alt=\"github\" src=\"https://deviconapi.vercel.app/github?color=2ea043\u0026size=180\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=2\u003e\n        \u003ci\u003ehttps://deviconapi.vercel.app/github?color=2ea043\u0026size=180\u003c/i\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eResult\u003c/th\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        \u003cb\u003egithub\u003c/b\u003e\u003cbr\u003e\n        \u003cb\u003eversion:\u003c/b\u003e original-wordmark\u003cbr\u003e\n        \u003cb\u003ecolor:\u003c/b\u003e #1f6feb\u003cbr\u003e\n        \u003cb\u003esize:\u003c/b\u003e 180px\n      \u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003cimg title=\"GitHub (wordmark) icon\" alt=\"github\" src=\"https://deviconapi.vercel.app/github?version=original-wordmark\u0026color=1f6feb\u0026size=180\"\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=2\u003e\n        \u003ci\u003ehttps://deviconapi.vercel.app/github?version=original-wordmark\u0026color=1f6feb\u0026size=180\u003c/i\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003cdiv align=\"right\"\u003e\n\n[*back to top*](#devicon-api)\n\u003c/div\u003e\n\n## 3. Dependencies\n  * [**axios**](https://www.npmjs.com/package/axios)\n  * [**text-to-svg**](https://www.npmjs.com/package/text-to-svg)\n\n\u003cdiv align=\"center\"\u003e\n\n**Based in [Devicon](https://github.com/devicons/devicon) and powered by [Vercel](https://vercel.com/)**\\\n**Made with ❤ by [Josélio Júnior (Lunatic Fox)](https://github.com/lunatic-fox)**\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunatic-fox%2Fdeviconapi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flunatic-fox%2Fdeviconapi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunatic-fox%2Fdeviconapi/lists"}