Question

我有以下导入，但不确定如何使用样式化组件显示MyIcon，有人可以给出一些建议吗，我已经看了其他答案但是仍然无法弄清楚

import React from 'react';
import styled from 'styled-components';
import MyIcon from 'material-design-icons/action/svg/production/ic_favorite_48px.svg';

编辑：如果我在HTML

中链接素材图标样式表，它就有效

HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

JS：

const MaterialIcon = (props) => (
  <i className={`material-icons ${props.className}`}>account_balance</i>
);

const Icon = styled(MaterialIcon)`
  font-size: 50px;
`;

...
render() {
  return (
    <Icon /> // works
  );
}

但是我不想导入整个样式表，我想使用明确的MyIcon导入？

Answer 1

使用React的预构建库可能更容易，不需要您包含样式表：https://www.npmjs.com/package/material-icons-react

有一些不会以编程方式添加整个样式表。

或者，您可以使用SVG并将其转换为具有“svgr”

等项目的React组件

样式组件如何显示图标

1 个答案: