0

I am using LWC oss framework to play with lightning-base-components npm package. I have used 'salesforce-ux/design-system' to use SLDS.I could use base components as lightning web components with SLDS. But problem here is, SLDS Icons are not rendering on the app. I have imported salesforce-ux/design-system css file in the public/index.html file but icons are not cmoing up on ui though they are present in public/assets folder. As I am new to opensource web application frameworks, I am not able to figure out if I am missing any..

html code:

 <p id="action" class="slds-box slds-text-heading_small">Action icons represent actions a user can take. The default size of action icons are larger than the others. <br /><br /> <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon> <lightning-icon icon-name="action:delete" alternative-text="Delete" title="Delete"></lightning-icon> <lightning-icon icon-name="action:new_note" alternative-text="New note" title="New note"></lightning-icon> <lightning-icon icon-name="action:preview" alternative-text="Preview" title="Preview"></lightning-icon> </p>

Output where icons are missing.

enter image description here

public/index.html

 <link rel="stylesheet" href="assets/styles/salesforce-lightning-design-system.min.css" />

express server.js

 app.get("*", (req, res) => { return res.sendFile(path.resolve(__dirname, "../public/index.html")); }); app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`) ); (async () => { const watcher = await rollup.watch(config); watcher.on('event', (event) => { if (event.code === 'START') { console.log('Compiling...'); } if (event.code === "END") { console.log('Done!'); } }); })();
Improve this question

1 Answer 1

Reset to default
0

lightning-base-components does not use the SLDS standard assets to display icons, but rather uses a series of internal templates that are dynamically chosen at runtime. These are located in various template components, such as lightning/iconSvgTemplatesStandard. The build script for LWR appears to use path.join to form the complete module paths, but unfortunately, these components are not sanitized correctly. Looking at the compiled JavaScript for one of these components, you'll see it includes lines like:

import { default as standard_announcement } from '/1/module/esm/0/l/en-US/mi/lightning%2FiconSvgTemplatesStandard%23buildTemplates%5Cstandard%5Cannouncement.html%2Fv%2F1_19_6-alpha/latest/lightning_iconSvgTemplatesStandard_buildTemplates\standard\announcement_html.js';

If you scroll to the right, you'll see that it tries to include unescaped backslashes in the source:

...\standard\announcement_html.js

Which results in a runtime error that is logged to the console. This only happens on operating systems that use Windows path notation (i.e. Windows). On Linux systems, they will be properly rendered as:

..._standard_announcement_html.js

There's an old bug that reports this, but it was closed. I am working on building a patch for this. In the meantime, the solution is to make sure you're running in a proper Linux environment, such as Windows Subsystem for Linux (WSL) or a proper Linux host.

Improve this answer
1
  • Thanks @sfdcfox for prompt reply. I did try to use WSL, but no luck. It's been same. The old bug link you have shared is based on using LWR as runtime and I am using express server here. In lwr.config.json, there is a provison to mention where asset files are in but I am wondering, if we can also provide something like this for express server. Also, after making change in primitiveIcon.js to fetch href() to return like ' /assets/icons/action-sprite/svg/symbols.svg#approval', Icons are started appearing. Commented Oct 6, 2023 at 16:41

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.