feat: Icon付きのバリエーションをつくってみた

tuqulore · Sep 3, 2021 · 33688f7 · 33688f7
1 parent 4dc17a1
commit 33688f7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/packages/tailwindcss/form.js b/packages/tailwindcss/form.js
@@ -30,6 +30,12 @@ module.exports = plugin.withOptions(
             },
           },
         },
+        {
+          '.input-icon': {
+            'font-family': "'Font Awesome 5 Free'",
+            fontWeight: 900,
+          },
+        },
         {
           "[type='checkbox'], [type='radio']": {
             appearance: 'none',

diff --git a/packages/tailwindcss/stories/Input.stories.js b/packages/tailwindcss/stories/Input.stories.js
@@ -7,6 +7,28 @@ const TextTemplate = () => {
 };
 export const Text = TextTemplate.bind({});
 
+const TextIconTemplate = () => {
+  return `
+  <div class="prose">
+  <p>
+    Font Awesome 5を使った例です
+  </p>
+  <h3>Search &#xf002;</h3>
+  <input type="text" class="input-icon" placeholder="&#xf002; Search" />
+
+  <h3>Mail &#xf002;</h3>
+  <input type="email" class="input-icon" placeholder="&#xf0e0; Search" />
+
+  <h3>Search &#xf002;</h3>
+  <input type="text" class="input-icon" placeholder="&#xf002; Search" />
+
+  <h3>Search &#xf002;</h3>
+  <input type="text" class="input-icon" placeholder="&#xf002; Search" />
+  </div>
+  `;
+};
+export const TextIcon = TextIconTemplate.bind({});
+
 const NumberTemplate = () => {
   return `<input type="number" placeholder="0" />`;
 };