Closed kylewelsby closed 3 years ago
I would love to improve documentation, where did you get stuck?
example with require
// entry file
require("document-register-element") // custom elements polyfill
window.customElements.define("ceri-icon", require("ceri-icon"))
// vue setup
// in any vue component
<template>
<div>
<ceri-icon name="fa-heart"></ceri-icon>
</div>
</template>
// webpack config
// add in module.rules
{
test: /ceri-icon\/icon/,
enforce: "post",
loader: "ceri-icon",
options: { icons: ["fa-heart"]}
}
This is exactly where I got up to.
I had a polyfill from another library that was complaining if I tried to define this custom element after the included library.
Positioning was important, other than that. The transition from kylewelsby/Vue-Icons@2.0.1b was mostly seamless.
There some breaking changes to note coming from VueIcons
material-
to ma-
<icon/>
to <ceri-icon/>
icon
component dependncy.Took a while to replace all references to the old component, it does seem to clean-up the code a lot.
Hi, I'm still having issues. Tried exactly as you suggested but I'm gettion this error in the console: "icon-loader wasn't called - please see ceri-icons documentation on how to setup webpack" "vue-icons isn't setup properly - failed to get fa-heart"
Any help will be much appriciated.
help
make sure you set up webpack properly:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /ceri-icon\/icon/,
enforce: "post",
loader: "ceri-icon",
options: { icons: ["fa-heart"]}
}
]
}
}
edit: you have to process a entry file which has a require of ceri-icon
somewhere, of course.
I'm getting this error:
WARNING in ./~/ceri-icon/icon-loader.js
58:45-82 Critical dependency: the request of a dependency is an expression
ERROR in ./~/ceri-icon/icon-loader.js
Module not found: Error: Can't resolve 'coffee-script/register'
Everything I've got matches the examples above. I'm using the electron-vue project template and I was previously using kylewelsby/Vue-Icons@2.0.1a.
After adding in coffee-script, I get different errors depending on some settings in my webpack config.
Uncaught Error: Cannot find module './icon-path'
and
Uncaught Error: ENOENT: no such file or directory, scandir 'D:\icons'
and this warning:
./~/ceri-icon/icon-loader.js
58:45-82 Critical dependency: the request of a dependency is an expression
Really don't know how to make this work. I didn't have any issues with vue-icons when I used that.
I was having a similar error to @Xnave2, with a project generated via vue-cli.
My issue ended up being that I was including the module.exports.rules
block within config/index.js
instead of build/webpack.base.conf.js
. Once I moved it and rebuilt, everything seemed to work perfectly.
I hope this is helpful to someone!
stale project closing issue
Would be nice to have a real example of how to implement this on Vue.js as following
vue-icons
deprecations