developmint / nuxt-svg-loader Goto Github PK

I'm using nuxt with typescript (nuxt-property-decorator), when import svg:

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Logo from '@/assets/svg/logo.svg'

@Component({
  components: {
    Logo
  }
})
class Def extends Vue {}
export default Def
</script>

I'm getting error: Cannot find module '@/assets/svg/logo.svg'.Vetur(2307)

Currently considering to switch https://github.com/egoist/svg-to-vue-component instead of vue-svg-loader as the former supports hot-reload 🤔

• SVGO options (egoist/svg-to-vue-component#2)

When you use the default options and rules given here, svg paths cannot be used in CSS background-image: url() anymore.

Example:

background-image: url('~/assets/some-icon.svg')

Output

background-image: url('[Object object]')

Expected

background-image: url("data:image/svg+xml;utf8,<svg> optimized svg </svg>");

This would require https://github.com/bhovhannes/svg-url-loader to work

The webpack config could then look like that, I tried to make it work locally, but somehow the resulting SVG data gets escaped (guess this is some kind of nuxt XSS protection).

config.module.rules.push({
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /css/,
      use: {
        loader: 'svg-url-loader',
        options: { noquotes: false }
      }
    },
    {
      use: [
        'vue-loader',
        {
          loader: 'svg-to-vue-component/loader',
          options
        }
      ]
    }
  ]
})

You could use it then like this:

background-image: url('~/assets/some-icon.svg?css')

This doesn't work

modules: [
    ["nuxt-svg-loader", { svgoConfig: false }]
],

But this works:

modules: [ "nuxt-svg-loader" ],
svgLoader: { svgoConfig: false },

Bug or by design?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update devdependency eslint to v9
• chore(deps): update devdependency eslint-plugin-jest to v28
• chore(deps): update devdependency eslint-plugin-promise to v6
• chore(deps): update devdependency eslint-plugin-standard to v5
• chore(deps): update devdependency eslint-plugin-vue to v9
• chore(deps): update devdependency get-port to v7
• chore(deps): update devdependency husky to v9
• chore(deps): update devdependency jsdom to v24
• chore(deps): update node.js to v20
• chore(deps): update npm to v10
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update devdependency eslint-plugin-node to v11

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update devdependency codecov to v3.7.1 [security]
• chore(deps): update devdependency standard-version to v8 [security]
• chore(deps): replace devdependency babel-eslint with @babel/eslint-parser ^7.11.0
• chore(deps): update all non-major dependencies (@commitlint/cli, @commitlint/config-conventional, babel-eslint, consola, eslint, eslint-plugin-import, eslint-plugin-jest, eslint-plugin-promise, eslint-plugin-standard, eslint-plugin-vue, get-port, jsdom, node, npm, nuxt-edge, svg-to-vue-component)
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency consola to v3
• chore(deps): update devdependency @nuxtjs/eslint-config to v12
• chore(deps): update devdependency eslint-config-standard to v17
• chore(deps): update devdependency jest to v29
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

More info: egoist/svg-to-vue-component#15
PR with failing tests: #28

https://nuxtjs.org/api/internals-module-container#extendbuild-fn- 🤷‍♂️

Hey!
With Nuxt 2.13, we can auto-load components. I tried auto-loading the SVG components like this in nuxt.config.js

  components: {
    extensions: ['vue', 'svg']
  }

But it doesn't work. (I put the SVG files in the components directory).

It would be great if SVG components were auto-loaded like regular Vue components! 😀

Hi ! 👋🏻
I was wondering if that kind of code may work <component is="svg-grey-home"></component>.

Because we have Nuxt components now, so maybe it is possible in any way.

Without having to use

<script>
export default {
  components: {
    SvgGreyHome: () => import('~/assets/svg/grey/home.svg'),
  },
}
</script>

In my case, writting <svg-grey-home></svg-grey-home> totally works (the setup is done for that) but I want to make it dynamic without the need to import it beforehand.

Have been using the module fine but now, could be after running npm update, Using inline SVG the DOM shows instead of showing the image,

Hi! Thanks for this module!

I build static websites (with nuxt generate) and I was wondering about the benefits in using this module over just using svg-to-vue-component.

I understand that it's a wrapper around vue-svg-loader but still it would be nice to have some usage info specific to nuxt 2 here, such as this part:
https://github.com/visualfanatic/vue-svg-loader#nuxtjs-1x--2x

After 1.0.1 release, my builds is failing.

<tecnospeed-logo
  :class="!isFixed ? 'svgToWhite' : ''"
  width="180"
  alt="Logo da TecnoSpeed"
  class="img-fluid" />

import TecnospeedLogo from '@/assets/images/tecnospeed.svg'
export default {
  name: 'CommonNavbar',
  components: {
    /* ... */
    TecnospeedLogo
  }
}

8:40:24 PM: ERROR in ./assets/images/tecnospeed.svg?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib!./node_modules/svg-to-vue-component/loader.js!./assets/images/tecnospeed.svg?vue&type=script&lang=js&)
8:40:24 PM: Module build failed (from ./node_modules/babel-loader/lib/index.js):
8:40:24 PM: SyntaxError: /opt/build/repo/assets/images/tecnospeed.svg: Unexpected token (3:17)
8:40:24 PM:   1 | //
8:40:24 PM:   2 |
8:40:24 PM: > 3 | import Component "/opt/build/repo/node_modules/svg-to-vue-component/lib/StyleComponent.js"
8:40:25 PM:     |                  ^
8:40:25 PM:   4 | export default {
8:40:25 PM:   5 |   components: {
8:40:25 PM:   6 |     'svg2vue-style': Component
8:40:25 PM:     at _class.raise (/opt/build/repo/node_modules/@babel/parser/lib/index.js:4051:15)
8:40:25 PM:     at _class.unexpected (/opt/build/repo/node_modules/@babel/parser/lib/index.js:5382:16)
8:40:25 PM:     at _class.expectContextual (/opt/build/repo/node_modules/@babel/parser/lib/index.js:5350:41)
8:40:25 PM:     at _class.parseImport (/opt/build/repo/node_modules/@babel/parser/lib/index.js:8823:12)
8:40:25 PM:     at _class.parseStatementContent (/opt/build/repo/node_modules/@babel/parser/lib/index.js:7586:27)
8:40:25 PM:     at _class.parseStatement (/opt/build/repo/node_modules/@babel/parser/lib/index.js:7505:17)
8:40:25 PM:     at _class.parseBlockOrModuleBlockBody (/opt/build/repo/node_modules/@babel/parser/lib/index.js:8073:23)
8:40:25 PM:     at _class.parseBlockBody (/opt/build/repo/node_modules/@babel/parser/lib/index.js:8060:10)
8:40:25 PM:     at _class.parseTopLevel (/opt/build/repo/node_modules/@babel/parser/lib/index.js:7470:10)
8:40:25 PM:     at _class.parse (/opt/build/repo/node_modules/@babel/parser/lib/index.js:8915:17)
8:40:25 PM:     at parse (/opt/build/repo/node_modules/@babel/parser/lib/index.js:10946:38)
8:40:25 PM:     at parser (/opt/build/repo/node_modules/@babel/core/lib/transformation/normalize-file.js:170:34)
8:40:25 PM:     at normalizeFile (/opt/build/repo/node_modules/@babel/core/lib/transformation/normalize-file.js:138:11)
8:40:25 PM:     at runSync (/opt/build/repo/node_modules/@babel/core/lib/transformation/index.js:44:43)
8:40:25 PM:     at runAsync (/opt/build/repo/node_modules/@babel/core/lib/transformation/index.js:35:14)
8:40:25 PM:     at process.nextTick (/opt/build/repo/node_modules/@babel/core/lib/transform.js:34:34)
8:40:25 PM:  @ ./assets/images/tecnospeed.svg?vue&type=script&lang=js& 1:0-210 1:226-229 1:231-438 1:231-438
8:40:25 PM:  @ ./assets/images/tecnospeed.svg
8:40:25 PM:  @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/common/navbar.vue?vue&type=script&lang=js&
8:40:25 PM:  @ ./components/common/navbar.vue?vue&type=script&lang=js&
8:40:25 PM:  @ ./components/common/navbar.vue
8:40:25 PM:  @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./layouts/error.vue?vue&type=script&lang=js&
8:40:25 PM:  @ ./layouts/error.vue?vue&type=script&lang=js&
8:40:25 PM:  @ ./layouts/error.vue
8:40:25 PM:  @ ./.nuxt/index.js
8:40:25 PM:  @ ./.nuxt/client.js
8:40:25 PM:  @ multi ./.nuxt/client.js

Hey,

I currently use Vuetify (1.5.16) in my nuxt-app. I also use vuetify-loader to only include the used components. However, after installing this module my whole app looks like crap. The console is full of these messages:
[Vue warn]: Unknown custom element: did you register the component correctly?
It seems like the vuetify-loader rules getting overwritten or something like that.

Vuetify is implemented as a plugin, as this was the standard way before the nuxt/vuetify module.
I therefore quickly created a fresh/new nuxt-app with the nuxt-vuetify-module. After enabling tree-shaking (a must, to use vuetify-loader under the hood), the app breaks as well. See attached screenshot. Without tree-shaking, everything is fine.
BTW: the beautiful red icon is a svg with css styling -> your module works :)

I don't know, if this should be fixed on your side or vuetify-loader? Any ideas?

Is it possible to apply the loader on for SVG loaded inside <script> tags ?
This would remove the need to use ?inline inside <style> tag.
Seem like it would be possible with source.vue?vue&type=script

HI, thanks to great work.

https://github.com/Developmint/nuxt-svg-loader#how-to-fix-eslint-auto-lint-error

When I wrote this code to avoid lint error from nuxt-svg-loader, eslint for vue and js files was disabled in all cases.
I created a project with create-nuxt-app.

Could anyone help me?
Thanks.

Hi Alex and Nuxt/Tailwind folks

Cheers for the awesome module! I'm super stoked to use it, but I can't get it working with TailwindCSS.

Usually, I put my SVG in a Vue component. I give the SVG class="w-full h-auto" and fill="currentColor", then I control the size and color with the parent element.

I hoped to do the same with this module, but I can't get the responsive/flexible sizing configured. Inspecting the dev tools, I can see that the class names are being prefixed with BaseLogo_svg__w-full BaseLogo_svg__h-auto ..I guess this is the problem. Is there a way to turn these prefixes off?

If not, could you give any tips on how to style them responsively using TailwindCSS?

Chrome dev tools

BaseLogo.svg

TheFooter.vue

nuxt.config.js

   [
      'nuxt-svg-loader',
      {
        svgoConfig: {
          plugins: [
            { prefixIds: false }, // I thought this might disable it, but I can't see a change true or false
          ],
        },
      },
    ],

Many thanks,
Mel

When I use this with Vetur it'll complain about not finding a module at my import ... path. Is there a way to fix this?