React bootstrap open-iconic 显示“T”符号而不是相关图标答案

【问题标题】：React bootstrap open-iconic showing a 'T' symbol instead of the relevant iconReact bootstrap open-iconic 显示“T”符号而不是相关图标
【发布时间】：2019-11-02 15:51:21
【问题描述】：

我安装了 bootstrap 和 react-open-iconic，但无法正常工作。

在代码中使用了以下内容：

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

在开发者工具下的浏览器中 - 反应我可以看到这个：

在用户界面中显示：

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

【问题讨论】：

标签： css reactjs bootstrap-4 icons iconic

【解决方案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

【讨论】：

【解决方案2】：

我知道有点晚了，但是...
那是因为你用错了。

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

表示您只导入该图标。对于指南针图标，您应该导入

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

并使用它：

 <Button>
      <CompassIcon />
 </Button>

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

【讨论】：