-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Updating `devicon.json`
Jørgen Kalsnes Hagen edited this page Oct 31, 2022
·
4 revisions
Besides making the SVG files, you must also update the devicon.json
. This is essential for our build script to work and to document your work.
Here is the interface your devicon.json
entry must have:
{
// the official name of the technology. See https://github.com/devicons/devicon/wiki/Naming-Conventions for more details
"name": string,
// list of alternative names for this technology
// used for the searchbar on the https://devicon.dev website.
"altnames": string[],
// list of tags relating to the technology for categorization/search purpose (TBD)
"tags": string[],
// keeps track of the different versions that you have.
"versions": {
// list all the SVGs that you have
"svg": VersionString[],
// list only the SVGs that can be converted to fonts.
// usually refers to `plain` and `line` versions but `original` can be accepted.
// DO NOT list aliases here (see below).
"font": VersionString[]
},
// the official/main color of the logo. Only track 1 color. Format is "#abcdef"
"color": string,
// keeps track of the aliases for the font versions ONLY. Read on for more details
// NOTE: as of Dec 2021, this attribute is now optional (see [this](https://github.com/devicons/devicon/discussions/465)).
// If you don't use it, still include the attribute but with an empty array `[]`.
"aliases": AliasObj[]
}
Here is what VersionString means:
- It's the version part of an
SVG
file's name - If you have
html5-original
, the version string would beoriginal
- If you have
react-line-wordmark
, the version string would beline-wordmark
See SVG Versions for more details
The aliases
attribute serves as a way to generate multiple font icon class names from just one SVG file. For example:
- We have a
apple-plain.svg
, which when generated into icon, would create the class name.apple-plain
. - However, since the Apple logo can also be used as an
original
version, we rename it toapple-original.svg
(see SVG Versions for the reason why) - Now, our class name will be
.apple-original
. If you want a class name of.apple-plain
, you'd need to createapple-plain.svg
, which is a copy ofapple-original.svg
. - Instead of doing that, you can use
aliases
to specify the new class name.apple-plain
for theapple-original.svg
file.
Here is the AliasObj
interface:
{
"base": VersionString, // the SVG file that you have
"alias": VersionString // the alias that you want to create.
}
So for this example, we would make it:
"aliases": [ // `aliases` is an array of objects
{
"base": "original", // the SVG file we are using as source for the alias
"alias": "plain" // the new name (alias) that we want to generate
}
]
Now, when we generate the font for apple
, we can access the same logo using either .apple-original
or .apple-plain
.
Aliases provide no benefits for SVG files. So, if apple-original
can't be made into a font, it won't work.