react图标云出现"尝试导入"错误

Question

我第一次尝试使用react图标云。我在codesandbox中找到了代码https://codesandbox.io/s/agitated-kirch-mh5l4?file=/src/Componente.js复制并粘贴到我的项目中，但出现错误

./src/Home/Cloud.js
Attempted import error: 'IconCloud' is not exported from 'react-icon-cloud'.

尝试删除node_modules，尝试重新启动服务器，但仍然出现相同的错误。

任何帮助都将不胜感激。提前谢谢。

这是代码

import React from "react";
import allIcons from "simple-icons";
import { v4 } from "uuid";
import { IconCloud } from "react-icon-cloud";
const Componente = () => {
const tagCanvasOptions = {
// activateAudio: string
// activeCursor: string
// altImage: boolean
// animTiming: 'Smooth' | 'Linear'
// audioIcon: boolean
// audioIconDark: boolean
// audioIconSize: number
// audioIconThickness: number
// audioVolume: number
// bgColor: null | string
// bgOutlineThickness: number
// bgRadius: number
// centreFunc: any
// centreImage: any
clickToFront: 500,
// decel: number
depth: 1,
// dragControl: boolean
// dragThreshold: number
// fadeIn: number
// freezeActive: boolean
// freezeDecel: boolean
// frontSelect: boolean
// hideTags: boolean
// imageAlign: 'centre' | 'left' | 'right'
// imageMode: null | 'image' | 'text' | 'both'
// imagePadding: number
// imagePosition: 'top' | 'bottom' | 'left' | 'right'
// imageRadius: number | string
imageScale: 2,
// imageVAlign: 'top' | 'bottom' | 'middle'
initial: [0.1, -0.1],
// interval: number
// lock: null | 'x' | 'y' | 'xy'
// maxBrightness: number
// maxSpeed: number
// minBrightness: number
// minSpeed: number
// minTags: 0 - 200
// noMouse: boolean
// noSelect: boolean
// noTagsMessage: string
// offsetX: number
// offsetY: number
outlineColour: "#0000",
// outlineDash: number
// outlineDashSpace: number
// outlineIncrease: number
// outlineMethod: 'outline' | 'classic' | 'block' | 'colour' | 'size' | 'none'
// outlineOffset: number
// outlineRadius: number
// outlineThickness: number
// padding: number
// pinchZoom: boolean
// pulsateTime: number
// pulstateTo: number
// radiusX: number
// radiusY: number
// radiusZ: number
// repeatTagsTags: 0 - 64
reverse: true,
// scrollPause: boolean
// shadow: string
// shadowBlur: number
// shadowOffset: [number,number] | number[]
// shape: 'sphere' | 'hcylinder' | 'vcylinder' | 'hring' | 'vring'
// shuffleTags: boolean
// splitWidth: number
// stretchX: number
// stretchY: number
// textAlign: 'centre' | 'left' | 'right'
// textColour: string
// textFont: string
// textHeight: number
// textVAlign: 'top' | 'bottom' | 'middle'
tooltip: "native", // null | 'div'
// tooltipClass: string
tooltipDelay: 0,
// txtOpt: boolean
// txtScale: number
// weight: boolean
// weightFrom: any
// weightGradient: any
// weightMode: 'size' | 'colour' | 'both' | 'bgcolour' | 'bgoutline' | 'outline'
// weightSize: number
// weightSizeMax: number | null
// weightSizeMin: number | null
wheelZoom: false,
// zoom: number
// zoomMax: number
// zoomMin: number
// zoomStep: number
};
const iconSlugs = [
"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 iconTags = iconSlugs.map((slug) => ({
id: slug,
simpleIcon: allIcons.Get(slug),
}));
return (
<div>
<IconCloud
key={v4()}
id={"icon"}
minContrastRatio={1}
iconSize={50}
backgroundHexColor={"#fff"}
fallbackHexColor={"#000"}
tags={iconTags}
tagCanvasOptions={tagCanvasOptions}
/>
</div>
);
};
export default Componente;

Answer 1

如果使用的是最新版本的包，则库中没有导出IconCloud组件。检查库的自述文件https://github.com/tsAppDevelopment/react-icon-cloud

它应该是Cloud，我想你正在寻找一个过时的例子。在自述文件中，您可以找到一个示例和一些演示链接。

请记住，这个库似乎没有被如此使用，请检查它是否可以满足您的需求。