fix colorful icons website

README.md

@@ -61,9 +61,11 @@ import 'package:iconify_flutter/icons/zondicons.dart';
 Zondicons.iconsList // List of all icons of VS Code icon set
 ```
 
-## Important Note ❗
+## Important Notes ❗
 
-All icon sets are free but Some collections require attribution when used for commercial purposes. See [This List](https://github.com/iconify/icon-sets/blob/master/collections.md) of collections and their licenses.
+- There is two diffrent versions of icons packages(package:colorful_iconify_flutter/icons/) colorful icons sets and (package:iconify_flutter/icons/) for un colorful icons sets. so please use the right package name
+
+- All icon sets are free but Some collections require attribution when used for commercial purposes. See [This List](https://github.com/iconify/icon-sets/blob/master/collections.md) of collections and their licenses.
 
 ## Thanks to 🙏
 

website/src/components/IconDetail.vue

@@ -20,7 +20,7 @@
       <p class="p-3" id="code">
         import 'package:iconify_flutter/iconify_flutter.dart';
         <br />
-        import 'package: {{ useCurrentCollection().value?.palette ? "colorful_iconify_flutter" : "iconify_flutter" }}/icons/{{ iconSetNameFile() }}.dart';
+        import 'package:{{ thisCollection?.palette ? "colorful_iconify_flutter" : "iconify_flutter" }}/icons/{{ iconSetNameFile() }}.dart';
         <br />
         <br />
         Iconify({{ iconSetName() }}.{{ iconName() }}) // widget
@@ -36,10 +36,13 @@
 
 <script setup lang='ts'>
 import copyText from 'copy-text-to-clipboard'
+import { CollectionMeta, getMeta } from '../data'
 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 thisCollection = ref<CollectionMeta | null>(null)
+
+
 const props = defineProps({
   icon: {
     type: String,
@@ -48,12 +51,16 @@ const props = defineProps({
   showCollection: {
     type: Boolean,
     required: true,
-  },
+  }
+
 })
 
 const copied = ref(false)
 
 const transformedId = computed(() => getTransformedId(props.icon))
+function iconsetid() {
+  return transformedId.value.split(":")[0]
+}
 
 function iconSetNameFile() {
   return transformedId.value.split(':')[0].replace(/-/g, '_')
@@ -81,4 +88,12 @@ const copy = async () => {
   }, 2000)
 }
 
+watch(transformedId, async () => {
+  thisCollection.value = (await getMeta(iconsetid()))
+  console.log(thisCollection.value?.palette)
+
+})
+
+
+
 </script>