React Bootstrap Open-Ionic显示一个'T'符号而不是相关图标

Question

我安装了引导程序和react-open-iconic，但无法正常工作。

在代码中使用以下内容：

if (sortColumn.order === "asc")
  return <TextIcon className="oi sort-ascending" />;
return <TextIcon className="oi sort-descending" />;

在浏览器中的开发人员工具下-反应我可以看到以下内容：

并在用户界面中显示：

添加到突出显示的绿色框显示为文本图标。它不显示预期的排序图标。没有错误或警告。有人知道怎么用吗？

Answer 1

找不到许多对react-open-iconic有用的帮助；但您可以使用open-iconic

相关的 js ：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :) 
        <span className="oi oi-person"> </span> 
        <span className="oi oi-sort-ascending"> </span> 
        <span className="oi oi-sort-descending"> </span> 

        </p>
      </div>
    );
  }
}

工作stackblitz here

Answer 2

我知道为时已晚，但是...
这是因为您使用错误的方式。

import {TextIcon} from 'react-open-iconic-svg';

表示您仅导入该图标。对于罗盘图标，您应该导入

import {CompassIcon} from 'react-open-iconic-svg';

并使用它：

 <Button>
      <CompassIcon />
 </Button>

对我来说，这是不自然的。现在，我正在寻找一种通过类标签名称使用光电图标的方法。