Using UIKit 3 Icons in React

Question

I'm trying to use UIKit icons in a React project. However, they don't show at all. I'm using npm and I'm running the following code:

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

open browser console, if the path is not correct, it will show 404 for missing files .. or use "react icon factory" — moped, May 07 '18 at 22:05

score 5 · Answer 1 · answered Nov 30 '19 at 03:36

5

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

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

Source: https://github.com/uikit/uikit/issues/2229#issuecomment-398972606

answered Nov 30 '19 at 03:36

Alex0007

548
7
15

score 2 · Answer 2 · answered Jun 21 '20 at 00:59

If using yarn or npm to install UIKit, in the root javascript file of react src/index.js you can add these

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

Then won't need to put anything into public/index.html

score 1 · Answer 3 · answered Jun 25 '21 at 19:29

If you use SSR, wrap UIkit.use(Icons) in useEffect.

NextJS example:

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

score 0 · Accepted Answer · answered May 10 '18 at 07:31

Solved by deleting these:

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';

And adding these into the of the /public/index.html file:

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

Using UIKit 3 Icons in React

4 Answers4