在React的StoryBook设置中不能使用SVG
是因为StoryBook默认情况下不支持SVG文件的导入和展示。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，用于描述二维图形和图形应用程序。在React中，通常可以使用import语句将SVG文件导入到组件中，并在JSX中使用它们。
然而，在StoryBook中，由于默认配置限制，无法直接导入和展示SVG文件。这是因为StoryBook的默认配置中没有包含对SVG文件的处理器。要解决这个问题，可以通过以下步骤来设置StoryBook以支持SVG：
- 安装相关依赖：首先，需要安装
@svgr/webpack依赖，它是一个Webpack插件，用于将SVG文件转换为React组件。可以使用以下命令进行安装： - 安装相关依赖：首先，需要安装
@svgr/webpack依赖，它是一个Webpack插件，用于将SVG文件转换为React组件。可以使用以下命令进行安装： - 配置Webpack：在StoryBook的Webpack配置中，需要添加对SVG文件的处理器。可以在
.storybook/main.js文件中添加以下代码： - 配置Webpack：在StoryBook的Webpack配置中，需要添加对SVG文件的处理器。可以在
.storybook/main.js文件中添加以下代码： - 这样配置后，Webpack会使用
@svgr/webpack插件来处理SVG文件，并将其转换为React组件。 - 导入和使用SVG：现在，可以在StoryBook的组件中导入和使用SVG文件了。可以使用
import语句将SVG文件导入到组件中，并在JSX中使用它们，就像使用其他React组件一样。 - 导入和使用SVG：现在，可以在StoryBook的组件中导入和使用SVG文件了。可以使用
import语句将SVG文件导入到组件中，并在JSX中使用它们，就像使用其他React组件一样。
通过以上步骤，就可以在React的StoryBook设置中使用SVG文件了。这样可以方便地展示和测试SVG图形在组件中的表现和交互效果。
腾讯云相关产品和产品介绍链接地址：
相关·内容
不能使用SVG作为NextJS应用程序和故事书的模块，使用绝对路径导入。通过许多尝试过的设置，我可以在Next或Storybook中导入SVG，但不能同时导入两者。我在babel-plugin-inline-react-svg上使用了这个设置{ &q
浏览 59提问于2020-03-15得票数 1
我运行的是React Native Storybook，它在本地模拟器中运行Storybook。除了React Native Storybook目前的工作原理之外，我还想为web构建一个它的实例，作为我们应用程序的参考伙伴。我正在使用"@storybook/react-native": "5.3.14"。我
浏览 28提问于2020-03-16得票数 5
3回答
我正在使用故事书文档，无法从assets文件夹加载图像。正如文档所说：“如果你使用的是一个自定义的Webpack配置，你需要将文件加载器添加到你的自定义的Webpack配置中”--我的webpack.config文件看起来像这样："react-dom": "^16.10.1&q
浏览 2提问于2019-10-07得票数 9
回答已采纳
1回答
我实际上是试图在主故事书工具栏上添加一个按钮(图标)。目前，在我们的项目中，我们使用的是config.js(在新版本中是preview.js )文件，其中有一个与主题相关的配置，使用addParameter api。但是，当我尝试添加相同的按钮在工具栏上创建一个按钮时，似乎没有任何东西起作用。/react';
a
浏览 22提问于2022-11-09得票数 0
我的react组件中有一个SVG，该组件工作正常。现在，我已经为该组件设置了故事书。')不是一个有效的名称。我将我的SVG存储在rootDirectory/utils/assets/Logo.svg文件夹下。以下是组件和故事书文件： header.jsx
import { styles
浏览 68提问于2021-08-18得票数 0
回答已采纳
我已经使用以下配置( @poppanator/sveltekit-svg )成功地使用SvelteKit设置了SvelteKit：我有以下故事簿配置(.storybook/main.cjs)： "stories": [
"
浏览 6提问于2021-10-08得票数 4
1回答
我用的是故事书和react本地语言。我使用了react本机web在浏览器上的故事书中显示我的组件，它起了作用。但是，每当我集成本机基础时，只要导入它的组件，就会得到以下错误：
在./node_modules/react-native/Libraries/Image/AssetSourceResolver.js模块中找不到:错误:无法解决'D
浏览 11提问于2022-02-02得票数 2
我希望我的工作流程在不刷新浏览器的情况下更新样式。我在控制台中看到HMR已启用。但是，更新scss文件会导致浏览器完全刷新。在处理从API加载数据的视图时，这在开发中尤其不方便。我使用的是webpack 4.42.0，webpack-dev-server 3.11.0。"@storybook/addons": "^5.3.17",
"@sto
浏览 34提问于2020-06-11得票数 0
回答已采纳
我正在尝试将Storybook添加到现有的React应用程序中，但是导入的svg文件会出现错误。svg的导入和使用方式如下：在运行和构建应用程序时，这是可行的，但我在Storybook中遇到了错误。怎么会这样?默认<
浏览 0提问于2019-01-21得票数 16
回答已采纳
我正在尝试在我的故事书上创建click事件，但无论我做什么，事件都不会出现在动作面板中。这是我的故事： import React from 'react'; viewBox="0 0 42 42&
浏览 4提问于2021-01-15得票数 1
1回答
我在一个react本机项目中实现StoryBook，并使用该设计在网络和移动平台上运行它：
import { SvgXml } from 'react-native-svg';
};
但是我得到了一个错误“无法读取未
浏览 11提问于2022-04-25得票数 0
1回答
我正在尝试使用@ Storybook / tests react中的composeStories Fn对童话故事进行最激烈的快照测试，但我仍然得到了错误：//... stack trace
我认为它与svg导入相关，因为这只发生在通过SVGR库将svgs作为react组件导入<em
浏览 12提问于2022-11-15得票数 0
3回答
我在Storybook中看不到SVG图标。我是前端开发的新手，所以不确定我做错了什么。我参考了这篇文章https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004。({ config, mode }) => {
const fileLoaderRule = config.module.rules.find(rule => rule
浏览 68提问于2019-11-08得票数 4
我正试图设置一些选项，但它不起作用。package.json "@storybook/addon-actions": "^3.4.10", "@storybook/addons": "^3.4.10",
"@storybook&#x
浏览 2提问于2019-01-17得票数 2
回答已采纳
1回答
我已经用了几个月没有问题的火锅了。今天，每当我试图将我的应用程序推向生产时，我就开始看到这个错误。我用的是Yarn，而不是NPM，所以我不确定这是否与此有关。我确实设置了一个.npmrc文件，该文件看起来如下：//npm.fontawesome.com": "^6.1.1",
"@f
浏览 16提问于2022-05-04得票数 1
回答已采纳
我似乎不能让@storybook插件旋钮工作吗？它似乎并不是在装饰实际的故事。基本上跟上了使用以下包：@storybook/addon-info": "^3.1.4,
@storybook&#x
浏览 0提问于2017-06-19得票数 14
我觉得我已经尝试了app.yaml和next.config.js中的所有东西，所以我只是在问，要让NextJs应用程序在Google app Engine上运行，正确的配置是什么？我能让它工作的唯一方法是删除所有<Link href="...">实例并使用下面的app.yaml。以下是我使用的模块的版本。next-fonts": "^0.18.0",
浏览 43提问于2019-11-01得票数 2
回答已采纳
当我在IIS服务器上运行带有VS 2017的项目时，会出现超时异常
"@fortawesome/fontawesome-svg-core": "^1.2.12", &quo
浏览 0提问于2019-02-24得票数 7
回答已采纳
我最近在我的项目中安装了Storybook 依赖项和开发依赖项如下： "dependencies": { "@emotion/styled": "^11.0.0", &qu
浏览 146提问于2021-01-26得票数 7
2回答
我尝试运行npm运行故事书后，第一次安装在我的新的创建-反应-应用程序的应用程序，我得到了这个错误。有人知道怎么解决这个问题吗？at getServerAddresses (C:\Users\HP\Desktop\cra\react-storybook\mystorybookapp\node_modules\@storybookat storybookDevServer (C:\Users\HP\Desktop\cra\react-storybook\
浏览 6提问于2022-04-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
即时通信 IM活动推荐
腾讯云开发者
