Skip to content

Example of Submitting Icons to the Repository

Jump to bottom Edit New page
Thomas Bui edited this page Jan 3, 2022 · 4 revisions

As an example, let's assume you have created the SVGs for Redhat and Amazon Web Services logos.

For the Redhat SVG, you have the original, original-wordmark, plain, and plain-wordmark versions.

For the Amazon Web Services SVGs, you have the original, original-wordmark, and plain-wordmark versions. The original version is simple enough to be a plain version as well.

  1. Put the SVGs for each logo that you have into its own folders in /icons
    • This means you would create two folders: one for amazonwebservices and one for redhat. See [Naming Convention[(https://github.com/devicons/devicon/wiki/Naming-Conventions) for more details.
    • Note: don't do this in the same commits; we want to have each Icon in its own PR.
  2. Update the devicon.json
    • For redhat, you would do this
{
  "name": "redhat",
  "tags": [
    "server",
    "linux"
  ],
  "versions": {
    "svg": [ // here are the versions that are available in svgs
      "original",
      "original-wordmark",
      "plain",
      "plain-wordmark"
    ],
    "font": [ // here are the versions that will be used to create icons
      "plain",
      "plain-wordmark"
    ]
  },
  "color": "#e93442", // note the '#' character
  "aliases": [] // no aliases in this case
},
* For the `amazonwebservices`, you would do this

{
  "name": "amazonwebservices", 
  "tags": [
    "cloud",
    "hosting",
    "server"
  ],
  "versions": {
    "svg": [ // here are the versions that are available in svgs
       "original",
       "original-wordmark",
       "plain-wordmark"
  ],
    "font": [ // here are the versions that will be used to create icons
      "original", // "original" is simple enough to be used as the plain icon so we'll add "plain" to the aliases below
      "plain-wordmark",
       // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
    ]
  },
  "color": "#F7A80D", // note the '#' character
  "aliases": [
    {
      "base": "original", // here is the SVG that we will upload to Icomoon
      "alias": "plain" // this is its alias. Our script will create a reference so users can use ["original" or "plain" when referencing it](https://github.com/devicons/devicon/wiki/Updating-the-%60devicon.json%60#aliases-and-aliasobj)
      // note that this is now optional (Jan 2022). You do not need to create aliases from now on. However, the attribute needs to stay so just put an empty `[]` if you are not using it.
    }
  ]
}
  1. Create a separate pull request (PR) for each Icon.
    • This means you would have to create one PR for Amazon Web Services and one PR for Redhat.
  2. Include the name of the icon in the pull request. Follow this format: new icon: Icon name (versions)
    • For Amazon Web Services, your PR title should be "new icon: amazonwebservices (original, original-wordmark, plain-wordmark)"
    • For Redhat, your PR title should be "new icon: redhat (original, original-wordmark, plain, plain-wordmark)"
  3. For the rest of the steps, you can follow Overview on Submitting Icon
Add a custom footer

Getting Started

Contribution Guidelines

Standards and Best Practices

Tutorials

Processes and Workflows

Clone this wiki locally