Get Started

An interactive 3D icon cloud. Supports both images and SVG.

Install

Install packages using your favorite package manager

$ pnpm install vue-icon-cloud
$ npm install vue-icon-cloud
$ yarn add vue-icon-cloud

Usage

You can use the images prop to pass in an array of image URLs.

<template>
  <IconCloud
    :images="images"
  ></IconCloud>
</template>
<script setup lang="ts">
import IconCloud from 'vue-icon-cloud'

const slugs = ref([
  "typescript", "javascript", "dart", "react", "flutter", "android", "html5", "css3", 
  "nodedotjs", "express", "nextdotjs", "prisma", "postgresql", "firebase", "nginx", 
  "vercel", "testinglibrary", "jest", "cypress", "docker", "git", "jira", "github", 
  "gitlab", "androidstudio", "sonarqube", "figma"
])

const images = computed(() => {
  return slugs.value.map(
    (slug) => `https://cdn.simpleicons.org/${slug}/${slug}`,
  );
})
</script>

Or you can use the icons prop to pass in an array of SVG icons.

<template>
  <IconCloud :icons="[Icon1, Icon2, Icon3, Icon4, Icon5]" />
</template>
<script setup lang="ts">
import IconCloud from 'vue-icon-cloud'
import Icon1 from 'path/to/icon1.svg'
import Icon2 from 'path/to/icon2.svg'
import Icon3 from 'path/to/icon3.svg'
import Icon4 from 'path/to/icon4.svg'
import Icon5 from 'path/to/icon5.svg'
</script>

Recommended to use unplugin/unplugin-icons, which support using the large number of icons provided by iconify.

<template>
  <IconCloud
    :icons="[
      IconSvelte,IconAwesome,
      IconZig,IconGit,
      IconAstro,IconDocker,
      IconReact,IconNuxt,IconGo,
      IconVscode,IconSolidjs,IconGithubCopilot,
    ]"
  />
</template>
<script setup lang="ts">
import IconSvelte from '~icons/logos/svelte-icon'
import IconAwesome from '~icons/logos/awesome'
import IconZig from '~icons/logos/zig'
import IconAstro from '~icons/logos/astro-icon'
import IconDocker from '~icons/logos/docker'
import IconGit from '~icons/logos/git'
import IconReact from '~icons/logos/react'
import IconNuxt from '~icons/logos/nuxt'
import IconGo from '~icons/logos/go'
import IconVscode from '~icons/logos/visual-studio-code'
import IconSolidjs from '~icons/logos/solidjs-icon'
import IconGithubCopilot from '~icons/logos/github-copilot'

import IconCloud from 'vue-icon-cloud'
</script>

You can also control the size of the svg. The iconStyle property will directly apply to the <svg> element.

<template>
  <IconCloud
    :icons="[
      IconSvelte,IconAwesome,IconNuxtIcon,
      IconAstro,IconGit,IconReact,IconGo,
      IconVscode,IconSolidjs,IconGithubCopilot,
      IconHomeBrew,
    ]"
    :iconStyle="{
      'font-size': '40px',
    }"
  />
</template>
<script setup lang="ts">
import IconSvelte from '~icons/logos/svelte-icon'
import IconAwesome from '~icons/logos/awesome'
import IconNuxtIcon from '~icons/logos/nuxt-icon'
import IconAstro from '~icons/logos/astro-icon'
import IconGit from '~icons/logos/git'
import IconReact from '~icons/logos/react'
import IconGo from '~icons/logos/go'
import IconVscode from '~icons/logos/visual-studio-code'
import IconSolidjs from '~icons/logos/solidjs-icon'
import IconGithubCopilot from '~icons/logos/github-copilot'
import IconHomeBrew from '~icons/logos/homebrew'

import IconCloud from 'vue-icon-cloud'
</script>