带有 React 和 Next.js 的 UIkit 图标答案

【问题标题】：Uikit Icons with React and Next.js带有 React 和 Next.js 的 UIkit 图标
【发布时间】：2020-05-13 01:32:19
【问题描述】：

无法让 uikit 图标出现在我的 next.js react 应用程序中。

我在 _app.js 中添加了指向 Head 的链接。我已经尝试链接到 node_modules（这是我留下 css 和 js 文件的内容）以及直接链接到 CDN。目前一切正常，除了图标。

<Head>
    {/**  UIkit */}
    <link rel="stylesheet" href="/uikit/dist/css/uikit.min.css" />
    <script src="/uikit/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit-icons.min.js"></script>
</Head>

直接链接时也没有区别。

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

我也尝试了 Webpack 方法，有人说它解决了这个问题。但是它对我没有任何改变。

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

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

我觉得可能是 Next.js 导致了问题。有没有人做过这项工作的经验？非常感谢任何提示。

【问题讨论】：

嗨！你设法解决了这个问题吗？我面临同样的问题。就个人而言，我在某些时候会看到图标，而在其他时候这些不会出现。

标签： reactjs uikit next.js

【解决方案1】：

我遇到了类似的问题，但我设法将 UIKit 集成到 NextJs 中。首先我创建了一个 UIKit 组件：

import React, { Component } from "react";

class UIKit extends Component {
  state = { ready: false };
  componentDidMount = () => {
    if (typeof window !== "undefined") {
      const uikit = require("uikit");
      const icons = require("uikit/dist/js/uikit-icons.min");
      uikit.use(icons);
      this.setState({ ready: true });
    }
  };

  render() {
    return <div>{this.props.children}</div>;
  }
}

export default UIKit;

然后我定义了我的自定义_app.tsx：

import React from "react";
import Head from "next/head";
import { AppProps } from "next/app";

import Navbar from "../components/navbar/navbar";
import UIKit from "../components/uikit";

// Global scss
import "../styles/uikit.scss";
import "../styles/global.scss";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div>
      <Head>
        <title>Strapi bloggg</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Staatliches"
        />
      </Head>
      <UIKit>
        <Navbar />
        <Component {...pageProps} />
      </UIKit>
    </div>
  );
}

如您所见，UIKit 组件将在每个页面上包裹所有内容。

最后我创建了一个uikit.scss，我在其中覆盖了默认主题的一些变量。这被导入为import "../styles/uikit.scss";

让我知道它是否有效。

【讨论】：