-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Example of Submitting Icons to the Repository
David Leal edited this page Aug 24, 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.
- 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 forredhat
. See Naming Convention for more details. - Note: don't do this in the same commits; we want to have each Icon in its own PR.
- This means you would create two folders: one for
-
Update the
devicon.json
- For
redhat
, you would do this
- For
{
"name": "redhat",
"altnames": [], // alternative names for the icon
"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",
"altnames": ["aws"],
"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
// 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.
}
]
}
For more info on aliases
, see this.
- 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.
- 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)
- For Amazon Web Services, your PR title should be
- For the rest of the steps, you can follow Overview on Submitting Icon
- What Icons Do We Accept?
- Requesting an Icon
- Overview on Submitting Icons
- Full Example of Submitting Icons
- Recommended Resources and Tools
- About the Maintainers, Supporters, and Contributors
- Code of Conduct
- Naming Conventions
- Organizing SVGs
- SVG Standards
- SVG Versions
- Updating
devicon.json
- Common Bugs and Solutions