sam3d / vue-svg Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 8.0 341 KB

Super simple svg loading module for Vue.js

License: MIT License

JavaScript 100.00%

vue-svg's People

Contributors

Stargazers

Watchers

Forkers

widgetworks vantik fedorsherbakov codefa winte256

vue-svg's Issues

How to chain inline svg loader with babel?

It looks like vue-svg-loader outputs es6 code. Is it possible to chain babel to process the output of that plugin?

Create tests

Relatively self-explanatory. This should include tests that can make sure that:

The loader is self-contained and gets ported over properly
The configuration doesn't overwrite itself and loads correctly no matter what the user passes it

Please upgrade vue-svg-loader to latest version

The class attribute on svg component seems not working.

https://github.com/visualfanatic/vue-svg-loader

Vue 3 support

Hi there,

I have been using your plugin on my Vue 2 projects and would really like to use on my new Vue 3 project as well, but it's not you applicable.

Setup
I did a vue create my-app and selected vue 3.x using @vue/cli 4.5.9.

Issue
When doing the vue add svg it installs but gives Plugin vue-cli-plugin-svg does not have a generator to invoke as a message in the terminal.
When running npm run serve it tells me Cannot find module 'vue-template-compiler. This seems to be because vue-cli is now using @vue/compiler-sfc instead of vue-template-compiler.

Best regards

Use different sprite loader with new defaults

Currently the sprite just pulls data into the browser using the most minimal configuration. It sets the filename to the same that file-loader uses by default, but extract: true should be the default.

It appears that the svg-sprite-loader is being superseded. After this has happened, this plugin should be able to support that.

TypeError: Cannot read property 'name' of undefined

[email protected]

~/projects/xxx/frontend  npm run start                                                                                   ✔  4s 

> [email protected] start
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  TypeError: Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at setup (/home/user/projects/xxx/frontend/node_modules/vue-cli-plugin-svg/index.js:44:41)
    at /home/user/projects/xxx/frontend/node_modules/vue-cli-plugin-svg/index.js:22:30
    at /home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:252:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:252:26)
    at Service.resolveWebpackConfig (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:256:48)
    at PluginAPI.resolveWebpackConfig (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
    at serve (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/commands/serve.js:73:31)
    at Service.run (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:246:12)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

 ~/projects/xxx/frontend  master !17  vue inspect --rules                                                                           1 ✘  3s 
 ERROR  TypeError: Cannot read property 'name' of undefined
TypeError: Cannot read property 'name' of undefined
    at setup (/home/user/projects/xxx/frontend/node_modules/vue-cli-plugin-svg/index.js:44:41)
    at /home/user/projects/xxx/frontend/node_modules/vue-cli-plugin-svg/index.js:22:30
    at /home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:252:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:252:26)
    at Service.resolveWebpackConfig (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:256:48)
    at PluginAPI.resolveWebpackConfig (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
    at /home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/commands/inspect.js:21:26
    at Service.run (/home/user/projects/xxx/frontend/node_modules/@vue/cli-service/lib/Service.js:246:12)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

  options.sprite = merge(
    { spriteFilename: fileLoaderOptions.name }, // fileLoaderOptions here is undefined
    options.sprite
  );

package.json

{
  "dependencies": {
    "babel-eslint": "10.1.0",
    "core-js": "3.19.1",
    "sass": "1.43.4",
    "sass-loader": "10.2.0",
    "tslib": "2.3.1",
    "typescript": "4.4.4",
    "vue": "3.2.11",
    "vue-class-component": "8.0.0-rc.1",
    "vue-loader-v16": "16.0.0-beta.5.4",
    "vuex": "4.0.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "5.3.1",
    "@typescript-eslint/parser": "5.3.1",
    "@vue/cli-plugin-babel": "5.0.0-beta.6",
    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
    "@vue/cli-plugin-typescript": "5.0.0-beta.6",
    "@vue/cli-service": "5.0.0-beta.7",
    "@vue/compiler-sfc": "3.2.21",
    "@vue/eslint-config-typescript": "9.0.1",
    "eslint": "8.2.0",
    "eslint-plugin-vue": "8.0.3",
    "vue-cli-plugin-svg": "~0.2.1",
    "vue-eslint-parser": "8.0.1"
  },
}

vue.config.js

const path = require('path')

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
      extensions: ['.js', '.vue', '.json', '.ts', '.vue'],
    },
  },
  pluginOptions: {},
  productionSourceMap: false,
}

.svg?inline outputs src="[object Module]"

I was trying your plugin (it's amazing, thanks!) in a new Vue CLI 3 default project. I've just did vue add svg and it works perfect if I use the option ?data, but I'd like to inline my SVG, so I tried...

<img src="@/assets/folder/asset.svg?inline">

and I got:

<img data-v-577233af="" src="[object Module]">

Any idea of what might I be doing wrong? Thank you!

Add option to set resourceQuery

Currently the resourceQuery is hardcoded. This should be configurable from the vue.config.js file.

How do you integrate it within the test utils library

Given the testing suite @vue/test-utils based on Jest and the usage of ?inline resource flags within the codebase.
What do you suggest as configuration in order to make the testing suite running without failures?

Browsing the web it is possible to find solutions like:

Add to the transform key of the jest.config.js file:

'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)(\\?inline)?$': 'jest-transform-stub',

Add to the moduleNameMapper key a new entry as such:

moduleNameMapper: {
   '^@/(.*svg)(\\?inline)$': '<rootDir>/src/$1',
   '^@/(.*)$': '<rootDir>/src/$1',
},

Unfortunately both of these changes aren't enough, when touching the moduleNameMapper the test suite fails with:

 Could not locate module @/${type}/${view}.vue mapped as:
    /[OS PATH TO SOURCE]/src/${type}/${view}.vue.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "/[OS PATH TO SOURCE]/src/$1"
      },
      "resolver": null
    }

The same error applies when the new line gets removed:

Could not locate module @/assets/images/[MY IMAGE FILE].svg?inline mapped as:
    /[OS PATH TO SOURCE]/src/assets/images/[MY IMAGE FILE].svg?inline.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "/[OS PATH TO SOURCE]/src/$1"
      },
      "resolver": null
    }

Note: the problem happens on a vue-cli based project with the following dependency versions:

"vue-cli-plugin-svg": "^0.1.3",
"@vue/test-utils": "^1.3.0",
"vue-jest": "^3.0.7",
"jest": "^27.4.1",
"@vue/cli-service": "^4.5.15",

Upgrade svg-sprite-loader to be compatible with vue-cli@next

Vue-cli@next uses webpack5
So it support added in https://github.com/JetBrains/svg-sprite-loader/blob/master/CHANGELOG.md#510-2020-12-05
Now I have error when I try to use ?sprite

Changelog

Hi! Thanks for this nice package 👍

It would be awesome if we had a Changelog so we can check if we can upgrade safely (i.e. right now, from 0.1.3 to 0.2.1 using Vue2) - or if we need extra work to adapt our config with the new version.

Thanks !

Webpack Config Reference?

I know the package wants to abstract away the webpack config, but is there a way to still use it with webpack?
Can anyone guide me on how to set it up?

Thanks!