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

Question

我安装了 bootstrap 和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

Answer 2

我知道这有点太晚了，但是......
这是因为你以错误的方式使用它。

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

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

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

并使用它：

 <Button>
      <CompassIcon />
 </Button>

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