Custom logo for breadcrumbs disappears when clicking on collection

default discord avatar
chrinsieboy
last month
4

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

  • discord user avatar
    denolfe
    Payload Team
    last month

    I was able to recreate this issue @chrinsieboy . Opening an issue now 👍

  • default discord avatar
    chrinsieboy
    last month

    Great 🎉

  • discord user avatar
    denolfe
    Payload Team
    last month

    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"
    >
    CleanShot_2023-11-01_at_12.44.37.png
  • default discord avatar
    chrinsieboy
    3 weeks ago

    Ahh, thx alot!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.