title: 图标云
description: 一个3D交互式球形环绕组件。
---

```vue
<template>
  <div class="grid place-content-center p-6">
    <IconCloud :images="imageUrls" />
  </div>
</template>

<script setup lang="ts">
const slugs = [
  "typescript",
  "javascript",
  "dart",
  "java",
  "react",
  "flutter",
  "android",
  "html5",
  "css3",
  "nodedotjs",
  "express",
  "nextdotjs",
  "prisma",
  "amazonaws",
  "postgresql",
  "firebase",
  "nginx",
  "vercel",
  "testinglibrary",
  "jest",
  "cypress",
  "docker",
  "git",
  "jira",
  "github",
  "gitlab",
  "visualstudiocode",
  "androidstudio",
  "sonarqube",
  "figma",
];

const imageUrls = slugs.map((slug) => `https://cdn.simpleicons.org/${slug}/${slug}`);
</script>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="icon-cloud" />
```

## 手动安装

在同一个文件中，复制并粘贴以下代码：

::code-group

:CodeViewerTab{label="IconCloud.vue" language="vue" componentName="IconCloud" type="ui" id="icon-cloud"}
:CodeViewerTab{filename="index.ts" language="typescript" componentName="index" type="ui" id="icon-cloud" extension="ts"}

::

## API

| Prop 名称 | 类型     | 默认值 | 描述                                          |
| --------- | -------- | ------ | --------------------------------------------- |
| `class`   | `string` | -      | Additional classes for styling the component. |
| `images`  | `array`  | `[]`   | Array of image URLs to render in the cloud    |

## 感谢

- Inspired by [MagicUI](https://magicui.design/docs/components/icon-cloud).
- Credits to [kalix127](https://github.com/kalix127) for porting this component.