Vue.js Support

[kylewelsby]

Would be nice to have a real example of how to implement this on Vue.js as following vue-icons deprecations

[paulpflug]

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"]}
  }

[kylewelsby]

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

• change material- to ma-
• change <icon/> to <ceri-icon/>
• remove icon component dependncy.
• upgrade to webpack2

Took a while to replace all references to the old component, it does seem to clean-up the code a lot.

[Xnave2]

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.

[Xnave2]

help

[paulpflug]

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.

[zxc23]

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.

[zxc23]

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.

[seevee]

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!

[kylewelsby]

stale project closing issue