` element with the appropriate `class` attribute set, and then running the JS decoration code. The base class is `pkspr`. Following the base class, you can add a number of classes that specify which icon is to be displayed.
+## Icons and metadata
-Here are some examples:
+The icons included in this project can be found in the `/icons/` directory. They are separated by type (e.g. **"berry"**, **"evo-item"**, **"valuable-item"**, etc.), and the Pokémon sprites can be found in `/icons/pokemon/` and `/icons/pokemon-gen8/`.
-```html
-
-
-
-
-
-
-
+The Pokémon sprite files use a simplified version of their English name, e.g. `mr-mime.png` for *Mr. Mime*. To programmatically process the files (e.g. to easily link some piece of data, like the dex number, to a sprite file), the data in `/data/dex.json` can be used.
+
+Up to and including *Pokémon Sun/Moon* (Generation 7), all Pokémon sprites had a size of **40×30**—starting with *Pokémon Let's Go* (Generation 8), they are **68×56**. Items are all **32×32**.
+
+Previous generations of games (Generation 1–2 and Generation 3–4) had their own collections of sprites, but these are not included in this database.
+
+## Data files
+
+Developers who want to use these sprites programmatically might want to look at the `/data/dex.json` and `/data/item-export.json` files; the former contains a list of all Pokémon and their associated icons, and the latter links all icons in the repo to their internal IDs used in-game.
+
+Each item in the `dex.json` file contains the following data (example):
+
+```js
+{
+ idx: 658,
+ slug: {
+ eng: "greninja",
+ jpn: "gekkouga"
+ },
+ icons: {
+ _: {
+ "has_right": true
+ },
+ ash: {
+ "has_right": true
+ },
+ "battle-bond": {
+ "is_alias_of": "ash"
+ }
+ },
+ name: {
+ eng: "Greninja",
+ jpn: "ゲッコウガ",
+ jpn_ro: "Gekkouga"
+ }
+}
```
-To clarify, the following classes can be used:
+The `icons` item contains a list of all icon types that are related to a Pokémon. It always contains at least a value `_` (underscore), which means the regular form or default icon. Each form object can contain the following details:
-*
pkmn-name – Pokémon name* or Pokédex number
-*
color-regular,
color-shiny – shiny or regular icon
-*
dir-left,
dir-right – direction the icon faces (some Pokémon, such as Roselia, have a different icon when facing right—by default, those that do not have a separate icon will be flipped using the CSS `transform` attribute)
-*
gender-male,
gender-female – gender of the icon (in case of gender differences, such as Meowstic)
-*
form-name – form of the Pokémon (e.g. `defense` for Deoxys, `a` or `exclamation` for Unown, `orange` for Flabébé, etc.)
+| Key | Meaning |
+|:----|:--------|
+| `is_alias_of` | This form uses the icon of another form |
+| `is_unofficial_icon` | The original (non-shiny) icon has been edited in some way (e.g. *Pumpkaboo* and *Gourgeist*) |
+| `is_unofficial_legacy_icon` | As above, but only for the smaller legacy 40×30 icons |
+| `has_right` | A unique right-facing icon is available (e.g. *Roselia*) |
+| `has_female` | A unique female icon is available (e.g. *Unfezant*) |
-\**Note: for Pokémon names, simplified versions without special characters are used, e.g. "flabebe" rather than "Flabébé". See the [icon overview page](http://msikma.github.io/pokesprite/build/overview.html) for a full list of supported names.*
+The `name` field also contains `jpn_ro`, which refers to the official romanization of a Pokémon's name.
-The tag name used is also important: if a `
` is used, the icon is displayed as an `inline-block`. If a `` is used, it's a `block`.
-
-### Item icons
-
-The item icons have been organized in a set of collections. To display an icon, first the collection name must be used, followed by the item itself. For example, an Oran Berry is named `oran` and is in the `berry` collection, so the full class name would be `pkspr berry-oran`. Some more HTML examples follow:
-
-```html
-
-
-
-
-
-
-
-
-```
-
-There are many different icons that can be displayed. See the [icon overview page](http://msikma.github.io/pokesprite/build/overview.html) for a complete overview.
-
-### Decorating the icons
-
-The icons will not yet show up until you run the decoration JS code. There are two ways to activate the code: either with a single command that is added before the closing `
