在 React 中使用 UIKit 3 图标答案

【问题标题】：Using UIKit 3 Icons in React在 React 中使用 UIKit 3 图标
【发布时间】：2018-05-07 10:38:46
【问题描述】：

我正在尝试在 React 项目中使用 UIKit 图标。但是，它们根本不显示。我正在使用 npm 并且正在运行以下代码：

import '../node_modules/uikit/dist/css/uikit.min.css';
import '../node_modules/uikit/dist/js/uikit.min.js';
import '../node_modules/uikit/dist/js/uikit-icons.min.js';

<span data-uk-icon="social" className="uk-text-large"/>

【问题讨论】：

打开浏览器控制台，如果路径不正确会显示404丢失文件..或者使用"react icon factory"

标签： reactjs icons getuikit

【解决方案1】：

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// loads the Icon plugin
UIkit.use(Icons);

来源：https://github.com/uikit/uikit/issues/2229#issuecomment-398972606

【讨论】：

【解决方案2】：

如果使用yarn或npm安装UIKit，可以在react src/index.js的根javascript文件中添加这些

// UIKit import
import 'uikit/dist/css/uikit.min.css'
import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'

// loads the Icon plugin
UIkit.use(Icons)

那么就不需要在public/index.html里面放任何东西了

【讨论】：

【解决方案3】：

通过删除这些解决：

import '../node_modules/uikit/dist/css/uikit.min.css';
import '../node_modules/uikit/dist/js/uikit.min.js';
import '../node_modules/uikit/dist/js/uikit-icons.min.js';

并将这些添加到 /public/index.html 文件中：

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>

【讨论】：

【解决方案4】：

如果您使用 SSR，请将 UIkit.use(Icons) 包裹在 useEffect 中。

NextJS 示例：

// _app.jsx
import UIkit from 'uikit'
import Icons from 'uikit/dist/js/uikit-icons'

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    UIkit.use(Icons)
  })

  return <Component {...pageProps} />
}

【讨论】：