I have a custom logo for in the breadcrumbs and on the dashboard it look wonderful, but when i click on a collection, it just disappears. I am working on payload version
2.0.9
Logo.tsx
/* eslint-disable no-use-before-define */
// eslint-disable-next-line import/no-extraneous-dependencies
import React from 'react'
const Icon = () => (
<svg viewBox="0 0 80.5 73.17" xmlns="http://www.w3.org/2000/svg">
<style>{`
.cls-1{
fill:#5130e9;
}
.cls-1,.cls-2{
fill-rule:evenodd;
}
.cls-2{
fill:#b29ff2;
}
`}</style>
<path className='cls-1' d="M47.5,53.28A11.93,11.93,0,0,1,37.17,71.17H12A12,12,0,0,1,1.43,53.5a.94.94,0,0,1,.12-.22L14.19,31.37a11.93,11.93,0,0,1,20.66,0Z" />
<path className='cls-2' d="M66.45,71.17H50.57a18.72,18.72,0,0,0,2.13-3,17.75,17.75,0,0,0,0-17.93L40.05,28.37a17.76,17.76,0,0,0-15.53-9,18,18,0,0,0-3.62.36L28.83,6A12,12,0,0,1,49.66,6L76.87,53.14A12,12,0,0,1,66.45,71.17Z" />
</svg>
)
export default Icon
payload.config.ts
import { buildConfig } from 'payload/config';
import { env } from './lib/env';
import Icon from './admin/Icon';
export default buildConfig({
admin: {
meta: {
titleSuffix: "Example title",
},
components: {
graphics: {
Icon: Icon,
},
},
},
// all the other stuff
})
Custom logo for breadcrumbs disappears when clicking on collection
I was able to recreate this issue @chrinsieboy . Opening an issue now 👍
Great 🎉
Issue created here:
https://github.com/payloadcms/payload/issues/3905
Issue updated with fix. TLDR is that the svg needs width and height.
// `admin.graphics.Icon`
<svg
width="1.5em" // Add this
height="1.5em" // This too
viewBox="0 0 24 24"
>
Ahh, thx alot!
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.