I have decided to use UiKit in my Rails 6 project and it works great. However, I just cannot get the icons to work. I checked a bunch of web resources but nothing solves the problem.
I'm using - Rails 6 - webpacker (standard w. Rails6) - yarn (standard w. Rails6) - jquery (for custom coding)
In my view I am doing nothing but trying to show the icon:
<span uk-icon="heart">tests</span>
<a href="" uk-icon="icon: heart">test</a>
Crickets. Nothing.
I have UiKit installed with Yarn: $: yarn list ...
├─ [email protected]
│ ├─ @types/react@^16.9.11
│ └─ react@^16.11.0
├─ [email protected]
My application.js looks like this:
require("@rails/ujs").start()
require("turbolinks").start()
require("channels")
require("jquery")
require("uikit")
require("uikit/dist/js/uikit-icons")
This does not throw an error. I tried the following:
require("uikit-icons")
and it resulted in a webpacker compiling error and an error message in the js console:
Uncaught Error: Cannot find module 'uikit-icons'
I tried adding
// loads the Icon plugin
UIkit.use(Icons);
that results in JS error (again, not using react. I am using jquery).
I even added the cdn url for the icons:
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
Nix. Silence. Nothing.
What am i doing wrong?
It looks like you are only requiring the UIkit library not assigning it to anything so it's throwing an error if you try to use it.
This worked for me:
const UIkit = require('uikit')
const Icons = require('uikit/dist/js/uikit-icons')
UIkit.use(Icons);