SVG 在不同模式下不可见

Question

我使用 Tailwind、Vite、React 和

vite-plugin-svgr

来渲染 SVG。我第二次使用移动模式

ShortLogo

时遇到问题（位于旁边的div），不知何故它不可见。我可以在检查器中看到该元素，它占用空间，但它在桌面模式和 md 上方的屏幕媒体中可见。

import React from 'react';
import ShortLogo from '../../assets/logo/short-Logo.svg?react';
import LongLogo from '../../assets/logo/long-Logo.svg?react';

export function AuthLayout({ children, sideBar }) {
  return (
    <main className="flex md:flex-row flex-col">
      <aside className="flex flex-col md:w-6/12 md:bg-[#E4E4E4] md:h-screen order-1 md:order-none ">
        <div className="flex flex-col md:mt-[25%] md:mr-[10%] m-auto w-fit mt-12 pb-16">
            <div className='md:flex items-center hidden'>
                <ShortLogo className="w-[58px] h-[55px]" />
                <LongLogo className="w-[189px] h-[38px]" />
            </div>
            
            {sideBar && <div className="md:mt-8 ml-8  flex flex-col gap-8 text-sm text-gray-500">{sideBar}</div>}
        </div>      
      </aside>

      <div className="w-full md:h-screen flex justify-center">
        <div className="w-fit mt-[15%] mx-3">
          <div className=''>
            {console.log('Rendering ShortLogo')}
            {/* problem is here */}
            <ShortLogo />
          </div>     
          {children}
        </div>
      </div>
    </main>
  );
}

我尝试添加一个键，添加和删除它的类，它只是在移动屏幕尺寸中不可见。

Answer 1

您可以将图标实现更改为类似的内容以避免出现问题

import type { FC } from 'react'
import { SVGProps } from 'react'

export const ListAdd: FC<SVGProps<SVGSVGElement>> = (props): JSX.Element => {
  const { className = 'w-5 h-5', ...rest } = props

  return (
    <svg
      className={className}
      viewBox='0 0 1000 1000'
      fill='currentColor'
      height='1em'
      width='1em'
      {...rest}
    >
      <path d='M350 450c14.667 0 26.667 5 36 15 9.333 10 14 21.667 14 35 0 13.333-5 25-15 35s-21.667 15-35 15H50c-13.333 0-25-5-35-15S0 513.333 0 500c0-13.333 4.667-25 14-35s21.333-15 36-15h300m0 200c14.667 0 26.667 5 36 15 9.333 10 14 21.667 14 35 0 13.333-5 25-15 35s-21.667 15-35 15H50c-13.333 0-25-5-35-15S0 713.333 0 700c0-13.333 4.667-25 14-35s21.333-15 36-15h300m620-200c20 0 30 16.667 30 50s-10 50-30 50H800v170c0 20-16.667 30-50 30s-50-10-50-30V550H536c-20 0-30-16.667-30-50s10-50 30-50h164V280c0-20 16.667-30 50-30s50 10 50 30v170h170M350 250c14.667 0 26.667 5 36 15 9.333 10 14 21.667 14 35 0 13.333-5 25-15 35s-21.667 15-35 15H50c-13.333 0-25-5-35-15S0 313.333 0 300c0-13.333 4.667-25 14-35s21.333-15 36-15h300' />
    </svg>
  )
}