>source

TailwindCSS를 사용하고 있으며 svg의 색상을 변경하고 싶습니다. Tailwind 없이 이 질문은 이전에 제기된 적이 있습니다. 여기, 2020년 이것좋은 대답이어야 하지만 Tailwind는 이러한 필터를 지원하지 않습니다. 문서에 가이드가 있습니다. svg 아이콘으로 작업하는 방법그러나 이 튜토리얼은 파일 없이 일반 텍스트 경로만 작동합니다.

svg 파일을 다운로드하고 svg의 경로를 이미지의src꼬리표. 다음 예제는 내 문제를 보여줍니다. 아이콘의 배경이 빨간색이고 아이콘의 색상이 파란색이 되기를 원합니다. 안타깝게도 아이콘 색상을 변경할 수 없습니다.

svg 아이콘을 다운로드하고 자산 경로를 연결하여 직접 사용할 때 올바른 워크플로는 무엇입니까? 내가 성취하고자 하는 것은 다음과 같다. 이것

  

아이콘 색상을 맞춤 Tailwind 색상으로 설정합니다.레드-500. 따라서 아이콘 색상을 변경하고 싶을 때마다 색상 클래스를 수정하면 됩니다.

할 줄 아는 사람이 있습니까?

SVG가 원하는 대로 정확하게 디자인되지 않는 한 SVG를 이미지로 사용하기 위한 워크플로는 없습니다. 인라인 SVG를 사용하지 않는 이유는 무엇입니까?

JHeth2022-02-05 06:33:49

미안, 무슨 말이야? 나는 이것을 시도했다 jsfiddle.net/e0o8ctmg

Question3r2022-02-05 06:33:49

이것은 도움이 될 것입니다 tailwindcss.com/docs/fill

Parth Developer2022-02-05 09:26:37
  • 답변 # 1

    사용하고 있습니다영웅 아이콘~와 함께순풍

    추가 시도색상~에등급그리고 설정채우다~처럼없음

    다음과 같이 내가 한

    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg">    <path stroke-linecap="round" stroke-linejoin="round"
        stroke-width="2" d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618
        3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622
        0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01">    </path></svg>

  • 답변 # 2

    Tailwind 프로젝트에 SVG를 추가하는 워크플로는 .

    Tailwind CSS의 창시자인 Adam Watham은 동영상Tailwind에서 인라인 SVG 작업에 대해 비디오에서 그는 Tailwind 프로젝트를 위해 최적화되지 않은 SVG를 준비하는 데 사용할 워크플로를 보여줍니다. 그가 언급하지 않은 추가 단계가 있는 단계는 다음과 같습니다.

    1. SVG 파일을 드롭하거나 SVG 마크업을 옵티마이저에 붙여넣습니다. SVGOMG.
    2. SVGOMG에서 제공하는 마크업을 복사하여 프로젝트에 붙여넣습니다.
    3. Tailwind가 클래스가 있는 속성을 수정할 수 있도록 채우기 또는 획 속성을 제거합니다(동영상에는 표시되지 않음).
    4. XMLNS 속성이나 XML 태그를 제거하십시오. 필요하지 않다인라인 SVG용
    5. Tailwind 클래스를 추가합니다.

    구성 요소 기반 프레임워크를 사용하는 경우 발췌아이콘을 응용 프로그램 전체에서 재사용할 수 있는 구성 요소로 변환합니다.

    이 접근 방식의 이점:

    • SVG 아이콘의 크기와 색상을 완벽하게 제어
    • 아이콘이 HTML의 일부이기 때문에 더 빠른 로드 속도

    다음은 댓글에서 공유한 Fiddle을 기반으로 한 예입니다. SVGOMG를 통해 SVG를 실행하고 Tailwind에서 제어할 수 있도록 채우기 속성을 제거했습니다.

    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" /><svg class="text-teal-500 fill-current h-16 w-16" viewBox="0 0 60 60">    <path d="M41.05 18.44a6.6 6.6 0 00-4.84-2.29c-3.66-.06-6.62 3.04-6.62 6.91 0 .55.05 1.09.17 1.6a18.68 18.68 0 01-13.66-7.55 7.33 7.33 0 00-.9 3.55 7.3 7.3 0 002.95 5.92 6.34 6.34 0 01-3-.92v.1c0 3.42 2.28 6.3 5.31 6.97a6.24 6.24 0 01-3 .1 6.74 6.74 0 006.2 4.93 12.8 12.8 0 01-9.81 2.9A17.89 17.89 0 0024 43.85c12.19 0 18.86-10.61 18.86-19.81l-.02-.9c1.3-.97 2.42-2.18 3.3-3.56-1.18.54-2.46.9-3.8 1.04a6.8 6.8 0 002.91-3.8c-1.28.77-2.7 1.33-4.2 1.62z"/></svg><svg class="bg-red-500 text-red-800 fill-current h-16 w-16 rounded-lg" viewBox="0 0 60 60">    <path d="M25.46 47.31V30h-3.52v-5.74h3.52v-3.47c0-4.68 1.4-8.06 6.53-8.06h6.1v5.73h-4.3c-2.15 0-2.64 1.43-2.64 2.92v2.88h6.62l-.9 5.74h-5.72V47.3h-5.69z"/></svg>

    5단계에서는 Tailwind 클래스 추가를 말합니다. 채우기, 획 및 획 너비 외에 다른 작업을 수행합니까? 답변이 더 구체적이어야 하는지 궁금합니다.

    notapatch2022-02-05 12:48:13
  • 이전 javascript : RGB 값으로 회색 음영 얻기
  • 다음 database : 라이브 위치 카산드라 파티션 키 전략