Как я могу установить размер иконок в Ant Design?

Question

Поэтому, когда я использую Icon в Ant Design, он всегда равен 14 * 14 px. Есть ли способ установить размер вручную?

Вещи как

<Icon width={"20px"} type="setting" />

или же

<Icon style={{width: '20em'}} type="setting" />

не работает

Answer 1

Так должно быть

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />

https://codepen.io/anon/pen/wNgrWX

Answer 2

Можно изменить размер значка с помощью fontSize свойство стиля.

например: использование style={{ fontSize: '150%'}}

      <PlayCircleFilled style={{ fontSize: '150%'}} />

Answer 3

В новой версии antd Icon вы можете увеличить размер значка следующим образом:

import { MessageTwoTone } from "@ant-design/icons";

И назовите это так:

  <div style={{ fontSize: "30px" }}>
        <MessageTwoTone />
      </div>

Я пробовал использовать его как атрибут <MessageTwoTone> но атрибут больше не работает, как в старой версии, упомянутой в ответах выше.

Answer 4

Не уверен, что это только для меня, но на сегодняшний день принятый ответ не работает, я заставил его работать, поместив className внутри компонента Icon и настроив svg этого класса. вот пример

component.js

      import { CheckCircleTwoTone } from '@ant-design/icons';

  <CheckCircleTwoTone
                    twoToneColor="#52c41a"
                    className="reg_icon"
                />

component.scss

      .reg_icon {
    svg {
        font-size: 120px !important;
    }
}

Answer 5

Использование <Icon style={{ fontSize: '30px'}} type="check-circle" />

Вот рабочая кодовая ручка: https://codesandbox.io/s/x7r7k7j6xw

Answer 6

Если вы используете значок внутри кнопки следующим образом:

      <Button type="text" icon={<GithubOutlined />} />

Вы можете добавить эти классы / стили, и это решит проблему за вас (это решило ее для меня)

      <Button type="text"
        className={styles.button}
        icon={<GithubOutlined className={styles.icon}/>}
/>

      .button {
  
  // The wanted size...
  font-size: 2.5em;

  // Without it, changing the font size will cause problems.
  width: fit-content;
  height: fit-content;

  .icon {
    font-size: inherit;
  }
}

Демо CodePen

Answer 7

Лучший способ сделать это с помощью javascript

Icon.setTwoToneColor("#000");