How to Use Static Resources in Lightning Web Components (LWC)

Static resources in Salesforce are files that you can upload and use in your Lightning Web Components (LWC). These can include images, CSS files, JavaScript libraries, fonts, etc., which are uploaded to Salesforce and served from the platform. This is a useful feature because it allows for reusability and centralizes resources. In this blog post, we will explore how to use static resources in LWC to enhance your components.

Use an Image from Static Resource in LWC

Before you can use static resources in LWC, you need to upload them to Salesforce.

Step 1: Upload Image into Static Resource

Navigate to Setup in Salesforce.
In the Quick Find box, type “Static Resources”.
Click on Static Resources under the “User Interface” section.
Click New to upload a new static resource.
Provide a Name for the resource (e.g., myImage, myLibrary).
Select the Cache Control setting (e.g., Public or Private).
Public is recommended for resources that do not change often, such as images or libraries.
Upload your file (e.g., an image, a JS library, or a CSS file).
After uploading, click Save.

Now that your resource is available, you can use it within your LWC.

Step 2: Reference the Static Resource(Image) in Your LWC

To use a static resource in your LWC, you need to import it using Salesforce’s @salesforce/resourceUrl module.

Here, We have uploaded an image named “salesforceLogo”.

Import the Static Resource: In your LWC JavaScript file (staticResourceCmp.js), import the static resource URL using @salesforce/resourceUrl.

import { LightningElement } from 'lwc';
import myImage from '@salesforce/resourceUrl/salesforceLogo';

export default class StaticResourceCmp extends LightningElement {
    imageUrl = myImage;  // Assign the imported static resource URL to a property
}

Use the Static Resource in HTML: In your LWC HTML file (staticResourceCmp.html), use the imageUrl to display the image.

<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom19">
        <img src={imageUrl}>
    </lightning-card>
</template>

In this example, the image will be displayed using the URL provided by Salesforce.

Use a CSS File from Static Resource

In Lightning Web Components (LWC), you can also use static resources to add custom CSS files to your components. This method allows you to store external CSS files, such as from a custom library or shared design, and then reference them in your LWC.

Learn about Share CSS styles among Lightning Web Components.

Step 1: Upload Custom CSS file into Static Resource

Go to Setup in Salesforce.
In the Quick Find box, type Static Resources and select it.
Click New to create a new static resource.
Name the static resource and, upload your CSS file (e.g., customStyles.css), and set the cache control to Public (or Private, depending on your use case).
Click Save.

Step2 : Reference the Static Resource(CSS File) in Your LWC

Access Static Resources in LWC: After uploading the static resource, you can reference it in your LWC using the loadStyle method from lightning/platformResourceLoader. This method is used to dynamically load the CSS from the static resource.

staticResourceCmp.html

<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom19">
        <!-- Image from Static Resource -->
        <img src={imageUrl} class="small">

        <!-- Custom CSS styles from Static Resource-->
        <div class="container">
            <h1 class="title">Hello, LWC with Custom Styles</h1>
            <lightning-button class="myButton" label="Click Me"></lightning-button>
        </div>

    </lightning-card>
</template>

staticResourceCmp.js

import { LightningElement } from 'lwc';
import salesforceLogo from '@salesforce/resourceUrl/salesforceLogo';
import { loadStyle } from 'lightning/platformResourceLoader';
import MY_CUSTOM_STYLES from '@salesforce/resourceUrl/myCustomStyles'; // Reference static resource

export default class StaticResourceCmp extends LightningElement {
    imageUrl = salesforceLogo;

    connectedCallback() {
        loadStyle(this, MY_CUSTOM_STYLES)
            .then(() => {
                console.log('Custom CSS loaded successfully');
            })
            .catch(error => {
                console.error('Error loading custom CSS:', error);
            });
    }

}

The loadStyle method ensures that the CSS is applied globally to the component. This method is asynchronous, and it returns a promise. If the CSS is loaded successfully, it logs a success message; otherwise, it catches any errors.

customStyles.css is a Custom CSS file from the Static Resources

.container {
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 5px;
    text-align: center;
}

.title {
    color: #333;
    font-size: 24px;
    margin-bottom: 20px;
}

.my-button {myCustomStyles
    background-color: #0070d2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.my-button:hover {
    background-color: #0056a0;
}

Output:

This approach allows you to keep your component styles modular and clean, while also leveraging reusable CSS files across multiple components in your Salesforce application.

Use a Custom fonts from Static resources

Step 1: Download and Upload Custom fonts file into Static Resource

Download the font file(s) you want to use. They are usually in .ttf or .woff format.
If the font comes in a compressed format (like .zip), extract it to get the individual font files.
In your Salesforce org, navigate to Setup -> Static Resources
Create a new Static Resource.
Give it a name (e.g., Pompiere).
Upload the font file(s) you downloaded.

Here , we downloaded and uploaded the “Pompiere” font.

Step2 : Reference the Static Resource(Custom Font File) in Your LWC

In your LWC component’s CSS file, use the @font-face rule to define the font:

@font-face {
    font-family: 'Pompiere';
    src: url('/resource/Pompiere.ttf') format('truetype');
}

Apply the Font to Your LWC Elements:

Use the font family name you defined in the @font-face rule to style your elements.

.customFont{
    font-family: 'Pompiere';
}

staticResoureCmp.html

<template>
    <lightning-card title="Static Resource Example" icon-name="custom:custom19">
        <!-- Image from Static Resource -->
        <img src={imageUrl} class="small">

        <!-- Custom CSS styles from Static Resource-->
        <div class="container">
            <h1 class="title">Hello, LWC with Custom Styles</h1>
            <lightning-button class="myButton" label="Click Me"></lightning-button>
        </div>
        <!-- Custom Font 'Pompiere' from Static Resource -->
        <div class="customFont">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
        <div>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
    </lightning-card>
</template>

staticResourceCmp.css

@font-face {
    font-family: 'Pompiere';
    src: url('/resource/Pompiere.ttf') format('truetype');
}
.customFont{
    font-family: 'Pompiere';
}

Output:

In the Above screenshot the first para has a different font and the second para has default font styles.

Use a JavaScript Libraries from Static Resources

We can also import the external Javascript libraries into LWC with static resources.

Step 1: Download and Upload Javascript Library Into Static Resource

Go to Setup in Salesforce.
In the Quick Find box, type Static Resources and select Static Resources.
Click the New button to upload your JavaScript library.
Fill in the name, description, and upload the .js file.
Ensure that the Cache Control is set to Public or Private, based on your needs.
Click Save.

Step2 : Reference the Static Resource(JS Library) in Your LWC

To use the static resource in your LWC, you need to use the loadScript function from the lightning/platformResourceLoader module.

This function helps load the JavaScript file from the static resource asynchronously.

In the previous article we have imported Js Library from static resource to Generating PDFs with jsPDF in Lightning Web Components (LWC). Kindly refer to that Article for better understanding. https://www.apexhours.com/generating-pdfs-with-jspdf-in-lightning-web-components-lwc/

jsPDF is a powerful library that you can use to convert Content into PDFs.

This guide covers ‘How to Use Static Resources in Lightning Web Components (LWC) – A Step-by-Step Guide.’

Please share it with your Salesforce friends and colleagues. Feel free to leave comments if you have any questions.

Happy Coding with Salesforce 🙂 .