WEB 잡동사니 기술

태태·2023년 6월 13일
0
post-thumbnail

SVG 컴포넌트의 색상이 같을 경우 컨트롤법

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" 
    xmlns="http://www.w3.org/2000/svg">
		{/* 하위에 있는 stroke, fill을 */}
    <path d="M18.8123 7.875C18.5979 10.7663 16.4061 13.125 13.9998 13.125  
C11.5936 13.125 9.39785 10.7669 9.1873 7.875C8.96855 4.86719 11.1014 2.625 13.9998 2.625C16.8982 2.625 19.0311 4.92188 18.8123 7.875Z" stroke="var(--gray-900)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M14.0001 16.625C9.24232 16.625 4.41341 19.25 3.51982 24.2047C3.41209 24.8019 3.75005 25.375 4.37513 25.375H23.6251C24.2508 25.375 24.5887 24.8019 24.481 24.2047C23.5869 19.25 18.7579 16.625 14.0001 16.625Z" stroke="var(--gray-900)" stroke-width="1.5" stroke-miterlimit="10"/>
# </svg>
{/* 최상위로 빼주어도 됨 */}
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="var(--gray-900)"
    xmlns="http://www.w3.org/2000/svg">
    <path d="M18.8123 7.875C18.5979 10.7663 16.4061 13.125 13.9998 13.125C11.5936 13.125 9.39785 10.7669 9.1873 7.875C8.96855 4.86719 11.1014 2.625 13.9998 2.625C16.8982 2.625 19.0311 4.92188 18.8123 7.875Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M14.0001 16.625C9.24232 16.625 4.41341 19.25 3.51982 24.2047C3.41209 24.8019 3.75005 25.375 4.37513 25.375H23.6251C24.2508 25.375 24.5887 24.8019 24.481 24.2047C23.5869 19.25 18.7579 16.625 14.0001 16.625Z" stroke-width="1.5" stroke-miterlimit="10"/>
</svg>
profile
과정에서 재미를 느끼지 않는데 성공하는 일은 거의 없다

0개의 댓글