Icon 在 Storybook 的 Control addon 中使用的问题
来源:9-3 持续优化 - Input组件代码实现和优化过程

weixin_慕标1536576
2021-03-02
Hi 老师您好,
我尝试了使用storybook 的 control addon, 大部分的attribute都运行非常好,但是对icon有一个问题。我的代码是这样的(其他代码都和您的一样):
import React, { useState } from "react";
import { Input, InputProps } from "./input";
import { Story, Meta } from "@storybook/react/types-6-0";
import { action } from "@storybook/addon-actions";
const ControlledInput = () => {
const [value, setValue] = useState("");
return (
<Input
value={value}
defaultValue={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
);
};
const styles: React.CSSProperties = {
textAlign: "center",
};
const CenterDecorator = (storyFn: any) => <div style={styles}>{storyFn()}</div>;
const Template: Story<InputProps> = (args) => (
<Input {...args} />
);
export default {
title: "Components/InputGroup",
component: Input,
decorators: [CenterDecorator],
argTypes: {
style: {
table:{
disable:true
}
},
onChange: {
table: {
disable:true
}
},
disabled:{
control: {
type: 'boolean'
}
},
size: {
control:{
type: 'inline-radio',
options: [
'default',
'lg',
'sm'
]
}
},
icon: {
control:{
type: 'select',
options: [
'function',
'airbnb',
'search'
]
}
},
prepend: {
control:{
type:'text'
}
},
append: {
control:{
type:'text'
}
}
}
} as Meta;
export const InputDefault = Template.bind({});
InputDefault.args = {
placeholder: "placeholder",
onChange: action("changed"),
};
每当我使用icon的时候,chrome的inspector里都有一个错误提示
Could not find icon {prefix: "fas", iconName: "function"}
不过我尝试了直接传入icon的参数而不是使用control来传入就没有这个问题,如下就是正常的
const Template: Story<InputProps> = (args) => (
<>
<Input {...args} />
<Icon icon='search' />
</>
);
我在网上搜了很多也没有找到相关的答案,想请教一下这类情况应该怎么解决呢?
谢谢!
写回答
1回答
-
张轩
2021-03-03
同学你好 因为在 storybook 中我们使用 fontawesome 要像 main 当中进行导入和配置。在storybook 的配置入口文件,
import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' library.add(fas) // 这样就可以了
00
相似问题