Stencil.js v2.9 announcement.

Great tool! I'd love to see some support for path aliases as well.

tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2017"
    ],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h",
    "baseUrl": "./src",
    "paths": {
      "utils": [ "./utils/*" ],
      "icons": [ "./icons/*" ],
    }
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

Ideally I'd like to be able to leverage the path aliases outlined in my config for imports of svgs used in this plugin given how the rest of my imports are working in stencil.

import Plus from 'icons/plus.svg';
import Minus from 'icons/minus.svg'

instead of

import Plus from '../../icons/plus.svg';
import Minus from '../../icons/minus.svg'

Currently getting the error:

TypeError: Failed to resolve module specifier "icons/plus.svg". Relative references must start with either "/", "./", or "../".

Thanks so much!

I am having trouble getting this to work in my project. After following the read me file I encounter this error:

Duplicate identifier 'svgContent'.ts(2300)
images.d.ts(4, 18): 'svgContent' was also declared here.

The conflicting file is part of stencil: node_modules/@stencil/core/internal/images.d.ts

declare module '*.svg' {
  const src: string;
  export default src;
}

"@stencil/core": "1.4.0",
"stencil-inline-svg": "0.0.2"

Any suggestions?

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 :)

Hi, not too sure how NPM packaging works but it looks like your package is published without the dist folder or it doesn't build it on install?

2:39:28 PM: > stencil build --docs
2:39:30 PM: [ ERROR ]  Cannot find module 'stencil-inline-svg' Error: Cannot find module
2:39:30 PM:            'stencil-inline-svg' at Function.Module._resolveFilename
2:39:30 PM:            (internal/modules/cjs/loader.js:636:15) at Function.Module._load
2:39:30 PM:            (internal/modules/cjs/loader.js:562:25) at Module.require
2:39:30 PM:            (internal/modules/cjs/loader.js:692:17) at require
2:39:30 PM:            (internal/modules/cjs/helpers.js:25:18) at Object.<anonymous>
2:39:30 PM:            (/opt/build/repo/stencil.config.ts:8:28) at Module._compile
2:39:30 PM:            (internal/modules/cjs/loader.js:778:30) at
2:39:30 PM:            Object.require.extensions..ts
2:39:30 PM:            (/opt/build/repo/node_modules/@stencil/core/dist/sys/node/index.js:4817:16)
2:39:30 PM:            at Module.load (internal/modules/cjs/loader.js:653:32) at
2:39:30 PM:            tryModuleLoad (internal/modules/cjs/loader.js:593:12) at
2:39:30 PM:            Function.Module._load (internal/modules/cjs/loader.js:585:3)

If I manually npm run build from the node_modules folder it seems to work perfectly.

Hello Fabricio!
Thanks so much for this, it's really useful. I was wondering if there was a way to avoid the englobing div. A bit like for react the tag <React.Fragment>.
I don't think this is a issue per say but it would be nice to be able to get rid of a non necessary node.
Thanks!
M.