Component metadata and component SVG files are XML-based files that allow you to customize the appearance of your component when exposing it through the Lightning App Builder and Lightning Community Builder tools, such as when configuring the icon used to identify the component in the sidebar.

This allows your users to use drag and drop tools to configure Salesforce UIs with specific components contained within your package. Refer to the Making components customizable section later in this chapter for further discussion and examples of this capability.

The following is an example for the raceCalendar.js-meta.xml file and indicates that the component can be used by users on record, home, and custom Lightning pages that they create:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="raceCalendar">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Race Calendar</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets> 
</LightningComponentBundle>