2024-05-06 19:43:28 +00:00
|
|
|
<!doctype html>
|
2023-02-06 18:31:55 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<link href="../dist/output.css" rel="stylesheet" />
|
|
|
|
|
</head>
|
|
|
|
|
<body class="m-0 p-2">
|
2024-05-10 07:00:08 +00:00
|
|
|
<section class="mb-2">
|
|
|
|
|
<h1 class="text-2xl">Main plugin</h1>
|
|
|
|
|
<p>
|
|
|
|
|
Monotone icons (changes color, blue):
|
|
|
|
|
<span class="text-2xl demo">
|
|
|
|
|
<span class="iconify mdi-light--home"></span>
|
|
|
|
|
<span
|
|
|
|
|
class="iconify mdi-light--arrow-left text-blue-600"
|
|
|
|
|
></span>
|
|
|
|
|
<span
|
|
|
|
|
class="iconify vscode-icons--file-type-light-ini text-blue-600"
|
|
|
|
|
></span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Color icons:
|
|
|
|
|
<span class="text-2xl demo">
|
|
|
|
|
<span class="iconify-color mdi-light--home"></span>
|
|
|
|
|
<span
|
|
|
|
|
class="iconify-color vscode-icons--file-type-firebase"
|
|
|
|
|
></span>
|
|
|
|
|
<span
|
|
|
|
|
class="iconify-color vscode-icons--file-type-js-official"
|
|
|
|
|
></span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
2024-05-10 12:20:32 +00:00
|
|
|
<p>
|
|
|
|
|
Using width/height to resize icon:
|
|
|
|
|
<span
|
|
|
|
|
class="iconify-nosize mdi-light--home h-12 w-12 text-blue-600"
|
|
|
|
|
></span>
|
2024-05-13 16:53:45 +00:00
|
|
|
<span
|
|
|
|
|
class="iconify mdi-light--home h-12 w-12 text-red-600"
|
|
|
|
|
></span>
|
2024-05-10 12:20:32 +00:00
|
|
|
</p>
|
2024-07-28 07:22:39 +00:00
|
|
|
<p>
|
|
|
|
|
Scaled non-square icons:
|
|
|
|
|
<span
|
|
|
|
|
class="fa6-mask fa6-regular-bookmark text-blue-600"
|
|
|
|
|
></span>
|
|
|
|
|
</p>
|
2024-05-10 07:00:08 +00:00
|
|
|
</section>
|
|
|
|
|
<section class="mb-2">
|
|
|
|
|
<h1 class="text-2xl">Dynamic selectors plugin, custom options</h1>
|
|
|
|
|
<p>Icons should scale to 1.5em, which is about 24px</p>
|
|
|
|
|
<p>
|
|
|
|
|
Monotone icons (red, blue):
|
2023-02-06 18:31:55 +00:00
|
|
|
<span
|
2024-05-10 07:00:08 +00:00
|
|
|
class="custom-monotone i-mdi-light-home text-red-600"
|
2023-02-06 18:31:55 +00:00
|
|
|
></span>
|
|
|
|
|
<span
|
2024-05-10 07:00:08 +00:00
|
|
|
class="custom-monotone i-custom-spinner1 text-blue-600"
|
2023-02-06 18:31:55 +00:00
|
|
|
></span>
|
2024-05-10 07:00:08 +00:00
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Failed icon (should not be pre-rendered):
|
|
|
|
|
<span
|
|
|
|
|
class="custom-monotone i-mdi-light-arrow-left text-red-600"
|
|
|
|
|
></span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Colored icons:
|
|
|
|
|
<span class="custom-background i-mdi-light-home"></span>
|
|
|
|
|
<span class="custom-background i-custom-spinner2"></span>
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="mb-2">
|
|
|
|
|
<h1 class="text-2xl">Dynamic selectors plugin</h1>
|
|
|
|
|
<p>
|
|
|
|
|
Few icons that change color on hover (first icon also changes
|
|
|
|
|
icon on hover):
|
|
|
|
|
<span class="text-2xl demo">
|
|
|
|
|
<span
|
|
|
|
|
class="icon-[mdi-light--arrow-left] hover:icon-hover-[mdi-light--arrow-right]"
|
|
|
|
|
></span>
|
|
|
|
|
<span class="icon-[mdi-light--forum]"></span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Custom icons, imported from "svg" directory (first icon's
|
|
|
|
|
animation slowed down using "customise" option):
|
|
|
|
|
<span class="text-2xl demo">
|
|
|
|
|
<span class="icon-[custom--spinner1]"></span>
|
|
|
|
|
<span class="icon-[custom--spinner2]"></span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Icons with hardcoded palette:
|
|
|
|
|
<span class="text-3xl demo">
|
|
|
|
|
<span
|
|
|
|
|
class="icon-[vscode-icons--file-type-access] hover:icon-hover-[vscode-icons--file-type-access2]"
|
|
|
|
|
></span>
|
|
|
|
|
<span class="icon-[vscode-icons--file-type-vue]"></span>
|
|
|
|
|
</span>
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="mb-2">
|
|
|
|
|
<h1 class="text-2xl">Clean selectors plugin (deprecated)</h1>
|
|
|
|
|
<p>
|
|
|
|
|
Monotone icon: 1em size (changing color), text-2xl size (red):
|
|
|
|
|
<span class="icon--mdi-light icon--mdi-light--home demo"></span>
|
|
|
|
|
<span
|
|
|
|
|
class="icon--mdi-light icon--mdi-light--home text-2xl text-red-600"
|
|
|
|
|
></span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Custom size set via width/height:
|
2024-05-10 12:20:32 +00:00
|
|
|
<span
|
|
|
|
|
class="h-12 w-12 scaled-icon-[mdi-light--forum] text-red-600"
|
|
|
|
|
></span>
|
2024-05-10 07:00:08 +00:00
|
|
|
</p>
|
|
|
|
|
</section>
|
2023-02-06 18:31:55 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
