kiwilan/nuxt-svg-transformer

Nuxt 3 module. Transform SVG to inject dynamically into Vue component, type included. Powered by unplugin.

nuxt-svg-transformer's Issues

Cannot apply class to SVG icons

The component now renders the icon like this:

<Suspense>
    <span v-bind="attrs" v-html="svg" />
</Suspense>

For that reason, no class can be passed to the SVG itself though it's important because if we would like to resize, change colors by applying classes, we can't do it now. Is there a way?

However, the module has improved functionalities in some cases over other existing modules. Thanks for the awesome work.

TypeError [ERR_INVALID_FILE_URL_PATH]

Hello, i have some error with this module
node version 16.15.1
updating to 18.13.0 node version not help

  ERROR  Error while requiring module nuxt-svg-transformer: TypeError [ERR_INVALID_FILE_URL_PATH]: File URL path must be absolute


 ERROR  Cannot start nuxt:  File URL path must be absolute            18:07:17

  at new NodeError (node:internal/errors:400:5)
  at getPathFromURLWin32 (node:internal/url:1463:11)
  at fileURLToPath (node:internal/url:1493:22)
  at finalizeResolution (node:internal/modules/esm/resolve:296:14)
  at moduleResolve (node:internal/modules/esm/resolve:945:10)
  at defaultResolve (node:internal/modules/esm/resolve:1153:11)       18:07:16  
  at nextResolve (node:internal/modules/esm/loader:163:28)
  at ESMLoader.resolve (node:internal/modules/esm/loader:842:30)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40) 

`request url is outside of Vite serving allow list`

Recent bug with Vite with 0.0.8 release:

The request url "/path/to/project/nuxt-svg-transformer/src/runtime/component.vue" is outside of Vite serving allow list.

Temporary solution

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  vite: {
    server: {
      fs: {
        // Allow serving files from one level up to the project root
        allow: ['..'],
      },
    },
  },
})

I work on another solution.

Tripple nesting issue on build Nuxt3

In DEV mode everything is ok, but on PRODUCTION mode I get an error
Could not resolve "../assets/icons/cache/basket-payment-card-inactive" from "assets/svg-transformer-list.ts"

it should be basket/payment/card-inactive icon.
It was generated in dev. While build process this files was remove from cache

Clear only the outermost sizes

Currently, setting the clearSize: true in the config clears all the height & width attributes that may be present on a SVG file,

• svg.ts:L40
• svg.ts:L65

For that reason the following:

<svg height="100" width="200" ...>
    <rect height="4" width="4" ...></rect>
</svg>

Will be transformed into:

<svg ...>
    <rect ...></rect>
</svg>

As a result, the rect will not be shown (it can happen on other elements as well) & it'll result in unexpected output.
Clearing the nested height & width attributes might not be necessary. I think only applying it to the parent or outermost element is sufficient, otherwise it is currently affecting some SVGs that I've tested with.

Also, the default value for clearSize is false written in the in the doc / readme, however it is actually behaving like the value is true.

Cache file name is including path in Windows OS

Hello again!

Few of my team members (at least 2) said that they were having file names generated that includes the absolute paths in the /cache/* directory. The screenshot will make it clear hopefully.

So /icons/github.svg is not converted to /icons/cache/github.ts
Rather, it's converted to something like /icons/cache/-users-farhan-dev-project-assets-icons-svg-github.ts

This is happening when ran from directly in Windows OS env (meaning no WSL2 / Docker involved. I've found It working with WSL2 and also with Docker - inside a linux container) Also there's no issues on MacOS so far.

This is making an inconsistency. I wanted to investigate but I couldn't reproduce it due to not having a Windows Machine in hand right now, so I thought it would be better to put it here. You will probably have a better idea what might go wrong.

hardcoded paths in dist/module.mjs

Is this intentional?

import jiti from "file:///Users/ewilan/Workspace/nuxt-svg-transformer/node_modules/.pnpm/[email protected]/node_modules/jiti/lib/index.js";

/** @type {import("/Users/ewilan/Workspace/nuxt-svg-transformer/src/module")} */
const _module = jiti(null, { interopDefault: true, esmResolve: true })("/Users/ewilan/Workspace/nuxt-svg-transformer/src/module.ts");

export default _module;

We get this error:

ERROR  Error while requiring module nuxt-svg-transformer: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/ewilan/Workspace/nuxt-svg-transformer/node_modules/.pnpm/[email protected]/node_modules/jiti/lib/index.js' imported from /Users/ydnar/development/domainr/tenaya/node_modules/.pnpm/[email protected]/node_modules/nuxt-svg-transformer/dist/module.mjs

Cache and type in .gitignore file are duplicate

I found a bug when using this library.
For the first time I run the Nuxt project, this library added two "assets/icons/cache" and "assets/svg-transformer-list.ts" to the .gitignore file. Great
The second time this library adds 'assets/icons/cache' to the .gitignore file.

Supplement the documentation

Hello, thank you for your work.

I have noticed that the documentation is incomplete. In particular, here the value "false" is missing, if we do not want to specify inline styles.