fix website colorful icons issues

.gitpod.yml

@@ -0,0 +1,9 @@
+tasks:
+  - init: |
+      echo 'TODO: build project'
+    command: |
+      echo 'TODO: start app'
+
+vscode:
+  extensions:
+    - "johnsoncodehk.volar"

README.md

@@ -6,7 +6,7 @@ Before starting ✋. I want to tell you that every star 🌟 added to my space s
 <div align="center" style="margin-top:10px"> 
 
 [![likes](https://badges.bar/iconify_flutter/likes)](https://pub.dev/packages/iconify_flutter)
-[![GitHub stars](https://img.shields.io/github/stars/andronasef/iconify_flutter.svg?style=flat&label=Star&maxAge=36&logo=github&color=success)](https://github.com/andronasef/iconify_flutter/)
+[![GitHub stars](https://img.shields.io/github/stars/andronasef/iconify_flutter.svg?style=flat&label=Star&maxAge=3600&logo=github&color=success)](https://github.com/andronasef/iconify_flutter/)
 [![HitCount](https://hits.dwyl.com/andronasef/iconify_flutter.svg?style=flat)](https://hits.dwyl.com/andronasef/iconify_flutter)
 
 </div>
@@ -15,10 +15,15 @@ Before starting ✋. I want to tell you that every star 🌟 added to my space s
 
 ## How to use? 🤔
 
-As easy as this
+First of course you need to install it
+```console
+$flutter pub add iconify_flutter
+```
+
+Then it as easy as this
 
 ```dart
-import 'package:iconify_flutter/iconify_flutter.dart';
+import 'package:iconify_flutter/iconify_flutter.dart'; // For Iconify Widget
 import 'package:iconify_flutter/icons/zondicons.dart'; // for Non Colorful Icons
 import 'package:colorful_iconify_flutter/icons/emojione.dart'; // for Colorful Icons
 ....

website/src/components/IconDetail.vue

@@ -8,10 +8,10 @@
     <div>
       <Icon class="p-4 text-8xl" :icon="icon" />
     </div>
-    <div class="rounded-md bg-gray-200 md:w-2/5 dark:(bg-transparent border-1) ">
+    <div class="rounded-md bg-gray-200 md:w-2/5 dark:(bg-transparent border-1)">
       <div class="relative">
         <button
-          class="rounded-md bg-[#329672] text-white py-2 px-2 transform transition top-2 right-2 absolute dark:(bg-transparent border-1) hover:scale-105 active:scale-95 "
+          class="rounded-md bg-[#329672] text-white py-2 px-2 transform transition top-2 right-2 absolute dark:(bg-transparent border-1) hover:scale-105 active:scale-95"
           @click="copy()"
         >
           <span class="iconify" data-icon="ion:copy" />
@@ -20,7 +20,7 @@
       <p class="p-3" id="code">
         import 'package:iconify_flutter/iconify_flutter.dart';
         <br />
-        import 'package:iconify_flutter/icons/{{ iconSetNameFile() }}.dart';
+        import 'package: {{ useCurrentCollection().value?.palette ? "colorful_iconify_flutter" : "iconify_flutter" }}/icons/{{ iconSetNameFile() }}.dart';
         <br />
         <br />
         Iconify({{ iconSetName() }}.{{ iconName() }}) // widget
@@ -37,7 +37,7 @@
 <script setup lang='ts'>
 import copyText from 'copy-text-to-clipboard'
 import { getTransformedId } from '../store'
-
+import { useCurrentCollection } from '../store'
 const reservedWords = ['assert', 'break', 'case', 'catch', 'class', 'const', 'continue', 'default', 'do', 'else', 'enum', 'extends', 'false', 'final', 'finally', 'for', 'if', 'in', 'is', 'new', 'null', 'rethrow', 'return', 'super', 'switch', 'this', 'throw', 'true', 'try', 'var', 'void', 'while', 'with', 'async', 'hide', 'on', 'show', 'sync', 'abstract', 'as', 'covariant', 'deferred', 'dynamic', 'export', 'extension', 'external', 'factory', 'function', 'get', 'implements', 'import', 'interface', 'library', 'mixin', 'operator', 'part', 'set', 'static', 'typedef', 'await', 'yield']
 
 const props = defineProps({
@@ -64,15 +64,15 @@ function iconSetName() {
 }
 
 function iconName() {
-  let newName = transformedId.value
+  let newName = transformedId.value.replace(/-/g, '_')
   newName = newName.split(':')[1]
   if (newName === iconSetName() || /^\W|^\d/gm.test(newName) || reservedWords.includes(newName))
     newName = `_${newName}`
   return newName
 }
 
 const copy = async () => {
-  const text = document.getElementById('code').innerText
+  const text = document.getElementById('code')?.innerText
   if (!text) return
 
   copied.value = copyText(text)