Icon 在 Storybook 的 Control addon 中使用的问题

Question

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' />
	</>
);

我在网上搜了很多也没有找到相关的答案，想请教一下这类情况应该怎么解决呢？
谢谢！

Answer 1

张轩 2021-03-03 18:15:34

同学你好 因为在 storybook 中我们使用 fontawesome 要像 main 当中进行导入和配置。在storybook 的配置入口文件，

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)
// 这样就可以了