docs: update demos to use unocss icons (#1546)

vueuse · May 1, 2022 · 1fbd57b · 1fbd57b
1 parent e24db79
commit 1fbd57b
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 44 deletions.
diff --git a/packages/.vitepress/theme/components/FunctionBadge.vue b/packages/.vitepress/theme/components/FunctionBadge.vue
@@ -32,7 +32,7 @@ const link = computed(() => {
   <div text="sm" class="whitespace-nowrap overflow-hidden overflow-ellipsis">
     <a v-bind="link" bg="gray-400/5" p="x-1.5 y-0.5" class="rounded items-center" flex="inline gap-1">
       <span v-html="styledName(fn.name)" />
-      <carbon-launch v-if="fn.external" class="opacity-80 text-xs" />
+      <i v-if="fn.external" i-carbon-launch class="opacity-80 text-xs" />
     </a>
     -
     <span class="overflow-hidden overflow-ellipsis" v-html="renderMarkdown(fn.description)" />

diff --git a/packages/.vitepress/theme/components/FunctionsList.vue b/packages/.vitepress/theme/components/FunctionsList.vue
@@ -135,14 +135,14 @@ function toggleSort(method: string) {
   </div>
   <div h="1px" bg="$vt-c-divider-light" m="t-4" />
   <div flex="~" class="children:my-auto" p="2">
-    <carbon-search m="r-2" opacity="50" />
+    <i i-carbon-search m="r-2" opacity="50" />
     <input v-model="search" class="w-full" type="text" role="search" placeholder="Search...">
   </div>
   <div h="1px" bg="$vt-c-divider-light" m="b-4" />
   <div flex="~ col" gap="2" class="relative" p="t-5">
     <div v-if="hasFilters" class="transition mb-2 opacity-60 absolute -top-3 right-0 z-10">
       <button class="select-button flex gap-1 items-center !px-2 !py-1" @click="resetFilters()">
-        <CarbonFilterRemove />
+        <i i-carbon-filter-remove />
         Clear Filters
       </button>
     </div>
@@ -162,7 +162,7 @@ function toggleSort(method: string) {
         No result matched
       </div>
       <button class="select-button flex-inline gap-1 items-center !px-2 !py-1" @click="resetFilters()">
-        <CarbonFilterRemove />
+        <i i-carbon-filter-remove />
         Clear Filters
       </button>
     </div>

diff --git a/packages/core/useColorMode/demo.vue b/packages/core/useColorMode/demo.vue
@@ -14,10 +14,10 @@ const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialVa
 
 <template>
   <button @click="next()">
-    <carbon-moon v-if="mode === 'dark'" class="align-middle" />
-    <carbon-sun v-if="mode === 'light'" class="align-middle" />
-    <carbon-cafe v-if="mode === 'cafe'" class="align-middle" />
-    <carbon-contrast v-if="mode === 'contrast'" class="align-middle" />
+    <i v-if="mode === 'dark'" i-carbon-moon inline-block align-middle class="align-middle" />
+    <i v-if="mode === 'light'" i-carbon-sun inline-block align-middle class="align-middle" />
+    <i v-if="mode === 'cafe'" i-carbon-cafe inline-block align-middle class="align-middle" />
+    <i v-if="mode === 'contrast'" i-carbon-contrast inline-block align-middle class="align-middle" />
 
     <span class="ml-2 capitalize">{{ mode }}</span>
   </button>

diff --git a/packages/core/useDark/demo.vue b/packages/core/useDark/demo.vue
@@ -8,8 +8,7 @@ const toggleDark = useToggle(isDark)
 
 <template>
   <button @click="toggleDark()">
-    <carbon-moon v-if="isDark" class="align-middle" />
-    <carbon-sun v-else class="align-middle" />
+    <i inline-block align-middle i="dark:carbon-moon carbon-sun" />
 
     <span class="ml-2">{{ isDark ? 'Dark': 'Light' }}</span>
   </button>

diff --git a/packages/core/useDevicesList/demo.vue b/packages/core/useDevicesList/demo.vue
@@ -12,9 +12,9 @@ const {
 
 <template>
   <div class="grid grid-cols-3 text-center" gap="2" p="y-4">
-    <carbon:camera />
-    <carbon:microphone />
-    <carbon:headphones />
+    <i i-carbon-camera />
+    <i i-carbon-microphone />
+    <i i-carbon-headphones />
 
     <div class="title">
       Camera ({{ cameras.length }})
@@ -47,7 +47,7 @@ const {
 </template>
 
 <style lang="postcss" scoped>
-svg {
+i {
   @apply text-2xl opacity-50 m-auto;
 }
 

diff --git a/packages/core/useFetch/demo.vue b/packages/core/useFetch/demo.vue
@@ -66,8 +66,8 @@ const text = stringify(reactive({
       Execute
     </button>
     <button @click="toggleRefetch">
-      <carbon-checkmark v-if="refetch" />
-      <carbon-error v-else />
+      <i v-if="refetch" inline-block align-middle i-carbon-checkmark />
+      <i v-else inline-block align-middle i-carbon-error />
 
       <span class="ml-2">{{ refetch ? 'Refetch On': 'Refetch Off' }}</span>
     </button>

diff --git a/packages/core/useGamepad/demo.vue b/packages/core/useGamepad/demo.vue
@@ -8,14 +8,14 @@ const { isSupported, gamepads } = useGamepad()
 <template>
   <div>
     <div v-if="!isSupported" flex="~ row" place="items-center content-center" items="center" space="x-4">
-      <carbon-error text="5xl" opacity="50" />
+      <i i-carbon-error text="5xl" opacity="50" />
       <div flex="~ col">
         <span text="2xl">Gamepad is not supported on this device.</span>
         <span opacity="70">It seems your device does not support the Gamepad API. Check <a href="https://caniuse.com/gamepad">here</a> for a list supported devices.</span>
       </div>
     </div>
     <div v-else-if="gamepads.length === 0" flex="~ row" place="items-center content-center" items="center" space="x-4">
-      <carbon-game-console text="5xl" opacity="50" />
+      <i i-carbon-game-console text="5xl" opacity="50" />
       <div flex="~ col">
         <span text="2xl">No Gamepad Detected</span>
         <span opacity="50">Ensure your gamepad is connected and press a button to wake it up.</span>

diff --git a/packages/core/useMediaControls/demo.vue b/packages/core/useMediaControls/demo.vue
@@ -93,12 +93,12 @@ const formatDuration = (seconds: number) => new Date(1000 * seconds).toISOString
 
     <div class="flex flex-row items-center items-center">
       <button @click="playing = !playing">
-        <carbon-play v-if="!playing" />
-        <carbon-pause v-else />
+        <i v-if="!playing" inline-block align-middle i-carbon-play />
+        <i v-else i-carbon-pause inline-block align-middle />
       </button>
       <button @click="muted = !muted">
-        <carbon-volume-mute v-if="muted" />
-        <carbon-volume-up v-else />
+        <i v-if="muted" i-carbon-volume-mute inline-block align-middle />
+        <i v-else i-carbon-volume-up inline-block align-middle />
       </button>
       <Scrubber v-model="volume" :max="1" class="w-32 ml-2" />
       <div
@@ -110,7 +110,7 @@ const formatDuration = (seconds: number) => new Date(1000 * seconds).toISOString
       <Menu class="mr-2">
         <template #default="{ open }">
           <button @click="open">
-            <carbon-closed-caption />
+            <i i-carbon-closed-caption inline-block align-middle />
           </button>
         </template>
         <template #menu="{ close }">
@@ -120,7 +120,7 @@ const formatDuration = (seconds: number) => new Date(1000 * seconds).toISOString
               @click="() => { disableTrack(); close() }"
             >
               <span class="flex-1">Off</span>
-              <carbon-checkmark :class="{ 'opacity-0': selectedTrack !== -1 }" />
+              <i i-carbon-checkmark inline-block align-middle :class="{ 'opacity-0': selectedTrack !== -1 }" />
             </MenuItem>
             <MenuItem
               v-for="track in tracks"
@@ -129,15 +129,15 @@ const formatDuration = (seconds: number) => new Date(1000 * seconds).toISOString
               @click="() => { enableTrack(track); close() }"
             >
               <span class="flex-1">{{ track.label }}</span>
-              <carbon-checkmark :class="{ 'opacity-0': track.mode !== 'showing' }" />
+              <i i-carbon-checkmark inline-block align-middle :class="{ 'opacity-0': track.mode !== 'showing' }" />
             </MenuItem>
           </div>
         </template>
       </Menu>
       <Menu class="mr-2">
         <template #default="{ open }">
           <button class="block" @click="open()">
-            <carbon-settings />
+            <i i-carbon-settings inline-block align-middle />
           </button>
         </template>
         <template #menu="{ close }">
@@ -146,30 +146,30 @@ const formatDuration = (seconds: number) => new Date(1000 * seconds).toISOString
               v-if="supportsPictureInPicture"
               @click="() => { togglePictureInPicture(); close(); }"
             >
-              <carbon-popup />
+              <i i-carbon-popup />
               <span>{{ isPictureInPicture ? 'Exit' : 'Enter' }} Picture in Picture</span>
             </MenuItem>
             <MenuItem @click="() => { loop = !loop; close(); }">
-              <carbon-repeat />
+              <i i-carbon-repeat />
               <span class="flex-1">Loop</span>
-              <carbon-checkmark v-if="loop" />
+              <i v-if="loop" i-carbon-checkmark />
             </MenuItem>
           </div>
         </template>
       </Menu>
       <Menu>
         <template #default="{ open }">
           <button class="block" @click="open()">
-            <carbon-meter />
+            <i i-carbon-meter inline-block align-middle />
           </button>
         </template>
         <template #menu="{ close }">
           <div class="absolute bottom-0 right-0 shadow py-2 bg-black rounded">
             <MenuItem @click="() => { controls.rate.value = 2; close(); }">
-              <carbon-meter-alt />2x
+              <i i-carbon-meter-alt />2x
             </MenuItem>
             <MenuItem @click="() => { controls.rate.value = 1; close(); }">
-              <carbon-meter-alt />1x
+              <i i-carbon-meter-alt />1x
             </MenuItem>
           </div>
         </template>

diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue
@@ -56,7 +56,7 @@ const stop = () => {
       <br>
       <label class="font-bold mr-2">Language</label>
       <div bg="$vt-c-bg" border="$vt-c-divider-light 1" inline-flex items-center relative rounded>
-        <carbon-language absolute left-2 opacity-80 pointer-events-none />
+        <i i-carbon-language absolute left-2 opacity-80 pointer-events-none />
         <select v-model="lang" px-8 border-0 bg-transparent h-9 rounded appearance-none>
           <option bg="$vt-c-bg" disabled>
             Select Language
@@ -70,7 +70,7 @@ const stop = () => {
             {{ `${voice.name} (${voice.lang})` }}
           </option>
         </select>
-        <carbon-chevron-down absolute right-2 opacity-80 pointer-events-none />
+        <i i-carbon-chevron-down absolute right-2 opacity-80 pointer-events-none />
       </div>
 
       <div class="mt-2">

diff --git a/packages/integrations/useDrauu/demo.vue b/packages/integrations/useDrauu/demo.vue
@@ -50,18 +50,18 @@ const { mode, color, size } = toRefs(brush)
           </button>
         </div>
         <div flex="~ row 1 shrink-1" items="center" w="full" max-w="64">
-          <carbon-paint-brush m="r-2" />
+          <i i-carbon-paint-brush m="r-2" />
           <Scrubber v-model="size" w="full" :min="1" :max="10" />
         </div>
         <div flex="~ row 1" justify="end">
           <button class="tool-button" :disabled="!canUndo" @click="undo()">
-            <carbon-undo />
+            <i i-carbon-undo />
           </button>
           <button class="tool-button" :disabled="!canRedo" @click="redo()">
-            <carbon-redo />
+            <i i-carbon-redo />
           </button>
           <button class="tool-button" @click="clear()">
-            <carbon-clean />
+            <i i-carbon-clean />
           </button>
         </div>
       </div>
@@ -76,16 +76,16 @@ const { mode, color, size } = toRefs(brush)
           p="2"
         >
           <button :class="{ active: brush.mode === 'draw' }" class="tool-button" @click="mode = 'draw'">
-            <carbon-pen />
+            <i i-carbon-pen />
           </button>
           <button :class="{ active: brush.mode === 'line' && !brush.arrowEnd }" class="tool-button" @click="mode = 'line'">
-            <mdi-slash-forward />
+            <i i-mdi-slash-forward />
           </button>
           <button :class="{ active: brush.mode === 'rectangle' }" class="tool-button" @click="mode = 'rectangle'">
-            <carbon-checkbox />
+            <i i-carbon-checkbox />
           </button>
           <button :class="{ active: brush.mode === 'ellipse' }" class="tool-button" @click="mode = 'ellipse'">
-            <mdi-light-shape-circle />
+            <i i-mdi-light-shape-circle />
           </button>
         </div>
         <svg

diff --git a/packages/integrations/useFuse/demo.vue b/packages/integrations/useFuse/demo.vue
@@ -138,7 +138,7 @@ const { results } = useFuse(search, data, options)
     <input v-model="search" placeholder="Search for someone..." type="text" w-full>
     <div flex flex-wrap>
       <div bg="dark:(dark-300) light-700" mr-2 border="1 light-900 dark:(dark-700)" rounded relative flex items-center>
-        <carbon-filter absolute left-2 opacity-70 />
+        <i i-carbon-filter absolute left-2 opacity-70 />
         <select v-model="filterBy" px-8 bg-transparent>
           <option bg="dark:(dark-300) light-700" value="both">
             Full Name
@@ -150,7 +150,7 @@ const { results } = useFuse(search, data, options)
             Last Name
           </option>
         </select>
-        <carbon-chevron-down absolute right-2 pointer-events-none opacity-70 />
+        <i i-carbon-chevron-down absolute right-2 pointer-events-none opacity-70 />
       </div>
       <span flex-1 />
       <div flex flex-row flex-wrap gap-x-4>