在 React 中使用 UIKit 3 图标

Question

我正在尝试在 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"/>

Answer 1

通过删除这些解决：

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>

Answer 2

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

Answer 3

如果使用 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

中放入任何东西

Answer 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} />
}

在 React 中使用 UIKit 3 图标

Using UIKit 3 Icons in React

icons

reactjs

getuikit