Stencil version: <div class="snippet-clipboard-content notransl

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

[Missing Documentation] How to use ionicons in a Stencil standalone component with Stencil One about stencil-site HOT 9 OPEN

bjesuiter commented on September 26, 2024 1

[Missing Documentation] How to use ionicons in a Stencil standalone component with Stencil One

from stencil-site.

Comments (9)

donskov commented on September 26, 2024 2

@bjesuiter Please try to add import to src/index.ts:

export { Components } from './components';
import '@stencil/router';
import 'ionicons';

from stencil-site.

splitinfinities commented on September 26, 2024 1

Noted that we should improve the documentation around where to import other stencil built web components - importing them from within the src/index.ts is the correct way to do this.

import 'ionicons';

from stencil-site.

miqmago commented on September 26, 2024 1

I've created a new stencil component and tried the following the steps:

Install ionicons: npm i ionicons:

"@ionic/core": "^6.0.4",
"@stencil/core": "^2.13.0",
"ionicons": "^6.0.1",

Add import 'ionicons'; in src/index.ts:

import 'ionicons';
import '@ionic/core';

export { Components, JSX } from './components';

Use ion-icon in my-component:

render() {
    return (
        <ion-buttons>
            <ion-button>
                <ion-icon slot="icon-only" name="remove-outline" />
            </ion-button>
        </ion-buttons>
    );

Build the component npm run build

npm link the component into another project with only an index.html webpage:

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="/node_modules/my-component/dist/my-component/my-component.esm.js"></script>
</head>
<body>
    <my-component />
</body>
</html>

live-serve the whole folder
Access to index.html. The html seems to be rendered, but the icon itself is missing (no icon shown inside ion-icon):

Empty icons:

EDIT
This is quite strange, the published npm version at pdf-component works fine, but I was affraid to publish something that was not working at all. I've tried the local files of published version in via linked node_modules and it still does not work.

from stencil-site.

bjesuiter commented on September 26, 2024

Ok, for some reason it does work now when adding import 'ionicons'; to my byc-region.tsx component file without having the script tag in index.html for the ionicons.js import from unpkg.
(this one: )'

Note, that I did not have to add it to index.ts.

To avoid my test being flawed by the browser cache, instructed ion-icon to load the md-aperture and md-airplane icons which I did not load at all before.

I also did compile it and imported it as Webcomponent into another project and it works.

A little question for understanding:
Would the dependency to ionicons get distributed along with my component, when imported in my src/index.ts, as the import in my own component does ?

@donskov Thanks for your help anyway! :)

But anyway, this import 'some-other stencil-package'; Syntax should be described in the documentation.
Could you guys add a page with a name something like 'Using other Webcomponents for your stencil component' under the Components Part of the Documentation Website?
https://stenciljs.com/docs/decorators

from stencil-site.

mmsharkey commented on September 26, 2024

I've tried all the above mentioned solutions using stencil and ionic to create a component and then exporting my component into a create-react-app and the icons will not show. I used a fresh stencil starter project and a fresh create-react-app project.

The script tag to add into the index.html is fickle (sometimes it works, and other times it doesn't.)

From my understanding, I shouldn't even need the script tag since ion icons should come included with ionic. Can someone please advise?

from stencil-site.

avrghz commented on September 26, 2024

Is there any update on this issue? I am also facing the same issue. In development bundle the icon shows up, but not in the production bundle.

from stencil-site.

nagashimam commented on September 26, 2024

@avrghz
I know it's late, but better than nothing...

How do you serve your production bundle? In my case, I was using VSCode's Live Server extension, which for some reason injects script tag with svg tag. And ion-icon doesn't accept that as the docs says. https://ionicons.com/usage#custom_icons

from stencil-site.

nathan2slime commented on September 26, 2024

Same thing happened here, I added import 'ionicons'; in src/index.ts, but ion-icon doesn't render an icon, just a div

from stencil-site.

rramsey commented on September 26, 2024

And here it is late 2024 and there are still some things to work out in the documentation. For example, if you are adding ionicons to a stencil component, do you need to run npm install --save @ionic/core as well and import that into your index.ts file? Yes, yes you do. Luckily for me miqmago documented it here.

That should be documented somewhere. It probably is and I missed it. But if @ionic/core is required by ionicons, shouldn't that be listed in ionicons' package.json and automatically installed like other dependencies?

I installed both @ionic/core and ionicons, imported both in my index.ts, and imported both into my component's tsx file. Stopped the server and did npm run build and npm run start and the icon finally appeared.

Too bad you can't do something nice and simple like style="color: blue;" in an ion-icon element, because that would be easy.

from stencil-site.

[Missing Documentation] How to use ionicons in a Stencil standalone component with Stencil One about stencil-site HOT 9 OPEN

Comments (9)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent