[F2U] - Pokémon Snippets

Harrie

Info


Created
2 years, 9 months ago
Creator
Harrie
Favorites
1480

Profile


[F2U - Pokémon Snippets]

Info

  • There is optional CSS that you can include to add animations to the icons, but otherwise these icons are now HTML only—however, you will need to input the following snippets into this Nunjucks editor.
  • The sprite images are copyright to Nintendo/Creatures Inc./GAME FREAK Inc.

Terms of Use

  • Please link back here if used.
  • You may, of course, use with other codes. Feel free to edit as needed.

Ensure you have WYSIWYG turned OFF, and Code Editor turned ON when editing, or the code won't work! More info.

I originally made these while I was making a Pokémon trainer layout. That layout is due for some revisions, but I finally got around to revamping these snippets to be HTML only :)

These snippets utilise Nunjucks to set the background position of the spritesheets for you (previously handled using CSS), you will need to input the snippets into this editor on my website in order to use them—you cannot use Nunjucks directly here on Toyhouse! The editor is a live editor, you should be able to paste your HTML layout directly into the editor and then insert these snippets where you need them. Otherwise if you're using something with its own templating language like Safehou-se, just use the snippets in the editor and copy the HTML.

Type Badges

bug
fighting
flying
poison
ground
rock
normal
ghost
steel
fire
water
grass
electric
psychic
ice
dragon
dark
fairy
???
cool
beautiful
cute
clever
tough

{{type(TYPE, true}}

e.g:

{{type(fire, true)}}

=

fire



{{type(TYPE)}}

e.g:

{{type(fire)}}

=


Pokémon Icons

Follows the PokéSprite naming conventions, however hyphens are replaced with underscores. These snippets were originally made with Toyhouse CSS constraints in mind, as such the following pokemon do not have their alternative forms available. This may be remedied at a later date. Also note that these snippets only cover pokemon up to generation 8.

  • (No cosplay pikachu or hat pikachus)
  • (No spiky-eared pichu)

Apologies if you needed to use a more specific sprite! You'll have to grab the image directly until I can update things, I'm afraid.

{{pokemon(pokemon sprite, shiny (optional}}

e.g:

{{pokemon(ponyta_galar)}} {{pokemon(pikachu_female)}} {{pokemon(pikachu_gmax, shiny)}}

=


Pokémon Slots (+ Optional CSS)

/* Pokémon Slots */
@import '0/8168/ZqwgAj/pokemon-slots';
      

As well as the shiny option, you can use the slot option to give it a background. If you import the above CSS, this will also animate the sprite when hovered. Adding the active option will mean the sprite is always slightly animated. You can specify these extra options in any order! The animations only work with CSS.

{{pokemon(ponyta, active, slot, shiny)}}

{{pokemon(rapidash, shiny, slot)}}