search

jeerbl / webfonts-loader

Make an icon font from SVGs!
https://npm.im/webfonts-loader
MIT License
191 stars 57 forks source link

Usage with nuxt #58

Closed sourenaraya closed 5 years ago

sourenaraya commented 6 years ago

Any idea how to use this with nuxt.js?

jeerbl commented 5 years ago

Well, what did you try?

KRaymundus commented 5 years ago

  1. Add to package.json: "webfonts-loader": "^4.3.0" and run npm install

  2. In nuxt-config.js add ~/plugins/icons to the plugins array

  3. In nuxt-config.js at the build section add:

    extend(config, ctx) {
config.module.rules.push({
test: /plugins\/icons\.js$/,
use: [
  'vue-style-loader',
  'css-loader',
  { 
    loader: 'webfonts-loader',
    options: {
      publicPath: config.output.publicPath,
    },
  }
],
})
}

  4. In the plugins folder, add a file icons.js

    module.exports = {
files: ['../assets/icons/*.svg'],
fontName: 'MyIcons',
classPrefix: 'my-',
baseSelector: '.my',
types: ['eot', 'woff2'],
fixedWidth: true,
}

  5. Create an assets/icons folder and add all your svg files in it.

  6. Optionally (if you use vuetify): In the vuetify.js plugin file add:

    
// Map internal Vuetify icon names to actual icon names.
const TL_ICONS = {
menu: 'my-menu',
complete: 'my-check',
...
}

Vue.use(Vuetify, { icons: MY_ICONS, theme: { primary: '#FF0094', ... }, })



7. Use it like this: `<v-icon>my-menu</v-icon>`
jeerbl commented 5 years ago

Not on the roadmap for now but please feel free to make a pull request (the code is quite simple).

xtoolkit commented 3 years ago

hi this solution work fine in > 2.14 but has error in v2.15

ERROR in ./plugins/icons.js (./node_modules/css-loader/dist/cjs.js!./node_modules/webfonts-loader??ref--12-2!./plugins/icons.js)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/_nuxt/8bf71f6152eddc5786f7-gpicons-beta1.eot?#iefix' in '/home/arshen/dev/gapfilm/nuxt/plugins'
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:209:21
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/arshen/dev/gapfilm/nuxt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/arshen/dev/gapfilm/nuxt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/arshen/dev/gapfilm/nuxt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/arshen/dev/gapfilm/nuxt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/arshen/dev/gapfilm/nuxt/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/arshen/dev/gapfilm/nuxt/node_modules/enhanced-resolve/lib/Resolver.js:285:5
 @ ./plugins/icons.js 3:14-128
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js
merijnponzo commented 3 years ago

Same problem, never had any problems untill i upgraded nuxt from 2.14 to 2.15. And that is the story of my life.

odule build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/_nuxt/ppcons.ppCons.351531e6981d4a9d7cfdf30345933534.eot?#iefix' in '/Applications/MAMP/htdocs/puppyplaza/frontend/plugins'
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:209:21
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /Applications/MAMP/htdocs/puppyplaza/frontend/node_modules/enhanced-resolve/lib/Resolver.js:285:5

 @ ./plugins/icons.js 11:14-230 24:4-30:6 25:23-239
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
andreysuha2 commented 3 years ago

Same issue 

Error: Can't resolve '/_nuxt/3260fdf705630fb546d7-IconFont.woff' in '/home/andrey/projects/zala/frontend/theme/plugins/IconFont'
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:209:21
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/andrey/projects/zala/frontend/theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/andrey/projects/zala/frontend/theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/andrey/projects/zala/frontend/theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/andrey/projects/zala/frontend/theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/RootPlugin.js:60:9
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/home/andrey/projects/zala/frontend/theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /home/andrey/projects/zala/frontend/theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
                                                                                                                                                    friendly-errors 15:00:27
 @ ./plugins/IconFont/index.js 3:14-134 16:4-22:6 17:23-143
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
xtoolkit commented 3 years ago

i change build option in nuxt.config file like this:

export default {
  build: {
    extend(config) {
      config.module.rules.push({
        test: /plugins\/icons\.js$/,
        use: [
          {
            loader: require.resolve('vue-style-loader'),
            options: this.buildContext.buildOptions.loaders.vueStyle
          },
          {
            loader: require.resolve('css-loader'),
            options: this.buildContext.buildOptions.loaders.css
          },
          {
            loader: require.resolve('webfonts-loader'),
            options: {
              publicPath: config.output.publicPath
            }
          }
        ]
      });
    }
  }
}

and fix for me