Custom Component - SVG file does not load properly

💬 App Building
1
  1. My goal: I have a icon that uses svg files
  2. Issue: SVG file does not load properly
  3. Steps I've taken to troubleshoot:
  4. Additional info:
    my test files.

CalendarIcon.tsx

import React from 'react';
import './styles.css';

const CalendarIcon = () => (
  <i className="calendar" />
);

export default CalendarIcon;

styles.css

.calendar {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url(./images/icons/calendar.svg);
}

index.tsx

export const Test: FC = () => {
  return (
    <CalendarIcon />
  );
}

In the browser console, I'm getting this error.

image
image1357×513 39.5 KB

2

Hi @rlmnl,

According to the docs, Custom Component Libraries can only contain js or css files.

You'll need to host the svg file externally for this to work.

See here: Build custom React components | Retool Docs