Template:Demo RecipeItemIcon: Difference between revisions

[unchecked revision]

Revision as of 16:03, 19 February 2026

Visual Goals

location=center

Template Examples

Border Colors
Color	Example
White (Default)
Yellow
Green

Responsive Sizing
Size	Example
64px (Default)	10
128px	10
256px	10

Count Shadow
Count	Example
No Count/Shadow
10	10
100	100

Composition Demo

100

10

67

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
size	`size`	Size in pixels (numbers only) Suggested values `64` `128` Default 64 Example 64 Auto value `64`	Number	optional
icon	`icon`	File name for icon. Example DaisyItem_Icon.png	String	required
count	`count` `num`	A number to display over this icon's image. Useful for showing counts. Example 10	Number	optional
border	`border`	Border color Suggested values `white` `yellow` `green` Default white Auto value `white`	String	optional

@@ Line 46: / Line 46: @@
 | 100 ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=100}}
 |}
+=== Composition Demo ===
+<div class="row g-2 mb-3"><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=100}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=TulipItem Icon.png|count=100}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=LupineItem Icon.png}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=RoseItem Icon.png|count=10|border=yellow}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=FlaxFlowerItem Icon.png|count=67|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=Flower Icon.png|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=EcoBookItem Icon.png|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=RiceFlourItem Icon.png|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=NailItem Icon.png|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=AdobeItem Icon.png|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=JoshuaLogItem Icon.png|border=green}}</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{Demo RecipeItemIcon|icon=IronOreItem Icon.png|border=green}}</div></div>
 <templatedata>