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

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

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