search

fabriciomendonca / stencil-inline-svg

A Stenciljs plugin to insert inline SVGs into components
MIT License
26 stars 6 forks source link

svg image transofrmed into base64 #5

Open bsastregx opened 4 years ago

bsastregx commented 4 years ago

Hi there!

I am working on a stencil project on which I am creating a set of custom components. One of these components is the "icon" component. The icon component has a property which tells which icon to use.

for example : <gxg-icon slot="icon" type="add"></gxg-icon>

This component would add a "icon" component with a svg "add" image inside. For this I am using stencil inline svg.

Now, on the project in which I am creating the components, it works just fine. How ever, a friend of mine, is working on another project, that uses the components of my project.

In his project, he is being unable to see the icon. We have inspected the html, and in his case, he is getting a base64 text, and in my case I am getting the actual svg element.

My case (the project I am creating the components) : 

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
    <title>Add</title>
    <desc>Created with Sketch.</desc>
    <g id="Add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="Path" fill="#111111" points="12.6315789 4 12.6315789 11.3684211 20 11.3684211 20 12.6315789 12.6315789 12.6315789 12.6315789 20 11.3684211 20 11.3684211 12.6315789 4 12.6315789 4 11.3684211 11.3684211 11.3684211 11.3684211 4"></polygon>
    </g>
</svg>

My friend (he is using my package, using my components) data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYwICg4ODEwMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+QWRkPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkFkZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgiIGZpbGw9IiMxMTExMTEiIHBvaW50cz0iMTIuNjMxNTc4OSA0IDEyLjYzMTU3ODkgMTEuMzY4NDIxMSAyMCAxMS4zNjg0MjExIDIwIDEyLjYzMTU3ODkgMTIuNjMxNTc4OSAxMi42MzE1Nzg5IDEyLjYzMTU3ODkgMjAgMTEuMzY4NDIxMSAyMCAxMS4zNjg0MjExIDEyLjYzMTU3ODkgNCAxMi42MzE1Nzg5IDQgMTEuMzY4NDIxMSAxMS4zNjg0MjExIDExLjM2ODQyMTEgMTEuMzY4NDIxMSA0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==

Can you please help me fixing this? Very appreciated :)

fabriciomendonca commented 4 years ago

Hey Bruno,

I will take a look and see what is happening and will come back to you.

If you find the problem first, please let me know

On Fri 6. Dec 2019 at 18:01, Bruno Sastre notifications@github.com wrote:

Hi there!

I am working on a stencil project on which I am creating a set of custom components. One of these components is the "icon" component. The icon component has a property which tells which icon to use.

for example :

This component would add a "icon" component with a svg "add" image inside. For this I am using stencil inline svg.

Now, on the project in which I am creating the components, it works just fine. How ever, a friend of mine, is working on another project, that uses the components of my project.

In his project, he is being unable to see the icon. We have inspected the html, and in his case, he is getting a base64 text, and in my case I am getting the actual svg element.

My case (the project I am creating the components) :

Add Created with Sketch.

My friend (he is using my package, using my components)

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYwICg4ODEwMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+QWRkPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkFkZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgiIGZpbGw9IiMxMTExMTEiIHBvaW50cz0iMTIuNjMxNTc4OSA0IDEyLjYzMTU3ODkgMTEuMzY4NDIxMSAyMCAxMS4zNjg0MjExIDIwIDEyLjYzMTU3ODkgMTIuNjMxNTc4OSAxMi42MzE1Nzg5IDEyLjYzMTU3ODkgMjAgMTEuMzY4NDIxMSAyMCAxMS4zNjg0MjExIDEyLjYzMTU3ODkgNCAxMi42MzE1Nzg5IDQgMTEuMzY4NDIxMSAxMS4zNjg0MjExIDExLjM2ODQyMTEgMTEuMzY4NDIxMSA0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==

Can you please help me fixing this? Very appreciated :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/fabriciomendonca/stencil-inline-svg/issues/5?email_source=notifications&email_token=AC5AFZPPLVACBIBJ274QOWDQXKAPZA5CNFSM4JW435CKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H6WNA3Q, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC5AFZLH2X447NPE4IJK4GLQXKAPZANCNFSM4JW435CA .

bsastregx commented 4 years ago

Sure! If I find the problem I will let you know! I would be great if you try to reproduce the issue, and see if you get the same problem as I am.

El lun., 9 dic. 2019 a las 10:40, Fabricio Mendonca (< notifications@github.com>) escribió:

Hey Bruno,

I will take a look and see what is happening and will come back to you.

If you find the problem first, please let me know

On Fri 6. Dec 2019 at 18:01, Bruno Sastre notifications@github.com wrote:

Hi there!

I am working on a stencil project on which I am creating a set of custom components. One of these components is the "icon" component. The icon component has a property which tells which icon to use.

for example :

This component would add a "icon" component with a svg "add" image inside. For this I am using stencil inline svg.

Now, on the project in which I am creating the components, it works just fine. How ever, a friend of mine, is working on another project, that uses the components of my project.

In his project, he is being unable to see the icon. We have inspected the html, and in his case, he is getting a base64 text, and in my case I am getting the actual svg element.

My case (the project I am creating the components) :

Add Created with Sketch.

<g id="Add" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

My friend (he is using my package, using my components)

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYwICg4ODEwMykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+QWRkPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IkFkZCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBvbHlnb24gaWQ9IlBhdGgiIGZpbGw9IiMxMTExMTEiIHBvaW50cz0iMTIuNjMxNTc4OSA0IDEyLjYzMTU3ODkgMTEuMzY4NDIxMSAyMCAxMS4zNjg0MjExIDIwIDEyLjYzMTU3ODkgMTIuNjMxNTc4OSAxMi42MzE1Nzg5IDEyLjYzMTU3ODkgMjAgMTEuMzY4NDIxMSAyMCAxMS4zNjg0MjExIDEyLjYzMTU3ODkgNCAxMi42MzE1Nzg5IDQgMTEuMzY4NDIxMSAxMS4zNjg0MjExIDExLjM2ODQyMTEgMTEuMzY4NDIxMSA0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==

Can you please help me fixing this? Very appreciated :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub < https://github.com/fabriciomendonca/stencil-inline-svg/issues/5?email_source=notifications&email_token=AC5AFZPPLVACBIBJ274QOWDQXKAPZA5CNFSM4JW435CKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H6WNA3Q , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AC5AFZLH2X447NPE4IJK4GLQXKAPZANCNFSM4JW435CA

.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fabriciomendonca/stencil-inline-svg/issues/5?email_source=notifications&email_token=ANBE7JVXSLCCNHSPCUSEZELQXZDF5A5CNFSM4JW435CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGJGQEQ#issuecomment-563243026, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANBE7JS3QKPAGDQ72VKWOALQXZDF5ANCNFSM4JW435CA .

-- Bruno Sastre Front End Developer | GeneXus http://genexus.com/ +598 2601 2082 | Simplifying Software Development

[image: GeneXus] http://genexus.com/go

bsastregx commented 4 years ago

Hi Fabricio! I was wondering if you could take a look at this!

fabriciomendonca commented 4 years ago

Could you please provide me the version of the component on yours and your friend's package-lock.json?

bsastregx commented 4 years ago

Sure!

"stencil-inline-svg": "^1.0.1",

El jue., 12 dic. 2019 a las 13:49, Fabricio Mendonca (< notifications@github.com>) escribió:

Could you please provide me the version of the component on yours and your friend's package-lock.json?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fabriciomendonca/stencil-inline-svg/issues/5?email_source=notifications&email_token=ANBE7JU7YTHH3F4LTOVVV2LQYJTTDA5CNFSM4JW435CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGXJJCY#issuecomment-565089419, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANBE7JRRWHG5KQ3UOVIQ4R3QYJTTDANCNFSM4JW435CA .

-- Bruno Sastre Front End Developer | GeneXus http://genexus.com/ +598 2601 2082 | Simplifying Software Development

[image: GeneXus] http://genexus.com/go

fabriciomendonca commented 4 years ago

It seems StencilJs is converting the inline svg generated by my package back to a base64 string, then creating the need for your friend to also configure his project to use the stencil-inline-svg package.

I hope this is gonna work for you (it worked for me)

import { Config } from '@stencil/core';
import { inlineSvg } from 'stencil-inline-svg';

export const config: Config = {
  namespace: 'showroom2',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ],
  plugins: [inlineSvg()],
};
bsastregx commented 4 years ago

Ok, thanks very much!

El jue., 12 dic. 2019 a las 15:28, Fabricio Mendonca (< notifications@github.com>) escribió:

It seems StencilJs is converting the inline svg generated by my package back to a base64 string, then creating the need for your friend to also configure his project to use the stencil-inline-svg package.

I hope this is gonna work for you (it worked for me)

import { Config } from '@stencil/core';import { inlineSvg } from 'stencil-inline-svg'; export const config: Config = { namespace: 'showroom2', outputTargets: [ { type: 'dist', esmLoaderPath: '../loader' }, { type: 'docs-readme' }, { type: 'www', serviceWorker: null // disable service workers } ], plugins: [inlineSvg()], };

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fabriciomendonca/stencil-inline-svg/issues/5?email_source=notifications&email_token=ANBE7JRLCNJRQ23AON6ZYZTQYJ7DFA5CNFSM4JW435CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGXSPYI#issuecomment-565127137, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANBE7JW7RYUT5RPTMBVYBRDQYJ7DFANCNFSM4JW435CA .

-- Bruno Sastre Front End Developer | GeneXus http://genexus.com/ +598 2601 2082 | Simplifying Software Development

[image: GeneXus] http://genexus.com/go

fabriciomendonca commented 4 years ago

Please, let me know if it worked so I can close the issue or continue investigating with you a solution for this problem. :D

bsastregx commented 4 years ago

We are not applying that solution, because we don't want the client to have to install your plugin and configure it. We will try to search for another solution.

El jue., 12 dic. 2019 a las 15:49, Fabricio Mendonca (< notifications@github.com>) escribió:

Please, let me know if it worked so I can close the issue or continue investigating with you a solution for this problem. :D

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fabriciomendonca/stencil-inline-svg/issues/5?email_source=notifications&email_token=ANBE7JWPWHK3WXOY3SALDSLQYKBSFA5CNFSM4JW435CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGXUKSY#issuecomment-565134667, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANBE7JSMP5JFACCUJ5X6TELQYKBSFANCNFSM4JW435CA .

-- Bruno Sastre Front End Developer | GeneXus http://genexus.com/ +598 2601 2082 | Simplifying Software Development

[image: GeneXus] http://genexus.com/go

valadas commented 2 years ago

I am also facing this issue and don't want to have consumers of the package to have to do anything special. If you know of any workaround that could be implemented in the consumed project itself, that would be awesome. If you have some clue about a fix but don't have much time to contribute a fix, I could contribute a bit financially towards a fix...