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 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 2

删除这些：

解决

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 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图标

4 个答案: