Hello i m trying to import a svg like this ``` Icon painter kotlinlang #compose

Hello, i'm trying to import a svg like this : ``` ...

Felipe Passos

04/28/2021, 1:16 PM

Hello, i'm trying to import a svg like this :

Copy code

Icon(
                painter = painterResource(id = R.drawable.ic_taxi),
                    contentDescription = "",
            Modifier
                .height(200.dp)
                .width(200.dp)
        )

The svg have multiple colors on it but for some reason the displayed image is full black

Felipe Passos

04/28/2021, 1:17 PM

This is the resource xml

Felipe Passos

04/28/2021, 1:17 PM

Copy code

<vector xmlns:android="<http://schemas.android.com/apk/res/android>"
    android:width="250dp"
    android:height="250dp"
    android:viewportWidth="250"
    android:viewportHeight="250">
  <group>
    <clip-path
        android:pathData="M0,0h250v250h-250z"/>
    <path
        android:pathData="M62.5,168.75C62.5,162.587 57.971,157.467 52.083,156.462C46.196,157.467 41.667,162.587 41.667,168.75C41.667,174.913 46.196,180.033 52.083,181.038C57.971,180.033 62.5,174.913 62.5,168.75Z"
        android:fillColor="#ffffff"/>
    <path
        android:pathData="M52.083,156.462C52.767,156.346 53.454,156.25 54.167,156.25C53.454,156.25 52.767,156.346 52.083,156.462Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M52.083,181.038C52.767,181.154 53.454,181.25 54.167,181.25C53.454,181.25 52.767,181.154 52.083,181.038Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M54.167,156.25C53.454,156.25 52.767,156.346 52.083,156.462C57.971,157.467 62.5,162.587 62.5,168.75C62.5,174.913 57.971,180.033 52.083,181.038C52.767,181.154 53.454,181.25 54.167,181.25C61.042,181.25 66.667,175.625 66.667,168.75C66.666,161.875 61.042,156.25 54.167,156.25Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M204.166,168.75C204.166,162.587 199.637,157.467 193.75,156.462C187.862,157.467 183.333,162.587 183.333,168.75C183.333,174.913 187.863,180.033 193.75,181.038C199.638,180.033 204.166,174.913 204.166,168.75Z"
        android:fillColor="#ffffff"/>
    <path
        android:pathData="M193.75,156.462C194.433,156.346 195.121,156.25 195.833,156.25C195.121,156.25 194.433,156.346 193.75,156.462Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M193.75,181.038C194.433,181.154 195.121,181.25 195.833,181.25C195.121,181.25 194.433,181.154 193.75,181.038Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M195.833,156.25C195.121,156.25 194.434,156.346 193.75,156.462C199.638,157.467 204.167,162.587 204.167,168.75C204.167,174.913 199.637,180.033 193.75,181.038C194.433,181.154 195.121,181.25 195.833,181.25C202.708,181.25 208.333,175.625 208.333,168.75C208.333,161.875 202.708,156.25 195.833,156.25Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M194.733,96.558L194.792,96.208L193,106.925H204.167C201.342,102.979 198.196,99.579 194.733,96.558Z"
        android:fillColor="#ffffff"/>
    <path
        android:pathData="M187.125,91.541C185.504,90.725 183.8,89.979 182.05,89.262C183.796,89.979 185.504,90.725 187.125,91.541Z"
        android:fillColor="#ffffff"/>
    <path
        android:pathData="M179.083,106.925L182.046,89.258C178.367,87.75 174.421,86.45 170.125,85.375C161,84.75 152.708,84.625 145.042,84.834L138.667,110.417L139.537,106.925H179.083V106.925Z"
        android:fillColor="#ffffff"/>
    <path
        android:pathData="M125.208,106.925L130.492,85.829C99.129,89.191 82.158,99.929 71.75,110.417C72.904,109.254 74.163,108.087 75.492,106.925H125.208Z"
        android:fillColor="#ffffff"/>
    <path
        android:pathData="M193,106.925L192.417,110.417L193,106.925Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M194.792,96.209L194.733,96.559C198.196,99.58 201.342,102.979 204.167,106.929H193L192.417,110.417H209.042C204.958,104.708 200.25,100.083 194.792,96.209Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M182.046,89.258L182.05,89.263L182.046,89.258Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M182.046,89.258L179.083,106.925H139.538L138.667,110.417H183.959L187.125,91.541C185.504,90.725 183.796,89.979 182.046,89.258C182.05,89.263 182.05,89.263 182.046,89.258Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M130.492,85.829C132.404,85.625 134.354,85.438 136.375,85.291C134.354,85.442 132.404,85.625 130.492,85.829Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M125.208,106.925H75.492C74.163,108.083 72.908,109.25 71.75,110.417H130.084L136.375,85.291C134.354,85.441 132.404,85.625 130.492,85.829L125.208,106.925Z"
        android:fillColor="#F4F4F4"/>
    <path
        android:pathData="M233.334,156.25V139.583C231.042,139.583 229.167,137.709 229.167,135.417C229.167,133.125 231.042,131.25 233.334,131.25V124.53L216,118.75H62.5C37.375,118.75 20.125,125.125 14.5,131.25H16.667C18.958,131.25 20.833,133.125 20.833,135.417C20.833,137.708 18.958,139.583 16.667,139.583H12.5V152.083C12.5,154.375 10.625,156.25 8.333,156.25V160.416H12.75H17.612C17.625,160.416 17.625,160.424 17.637,160.424C21.417,143.758 36.371,131.25 54.167,131.25C71.958,131.25 86.912,143.754 90.691,160.416H159.308C163.087,143.753 178.042,131.25 195.833,131.25C213.625,131.25 228.579,143.754 232.358,160.416H237.5C235.208,160.417 233.334,158.542 233.334,156.25ZM106.25,139.583H97.916C96.75,139.583 95.833,138.667 95.833,137.5V129.167C95.833,128 96.749,127.083 97.916,127.083H106.25C107.417,127.083 108.333,128 108.333,129.167V137.5C108.333,138.667 107.417,139.583 106.25,139.583ZM120.833,154.167C120.833,155.333 119.917,156.25 118.75,156.25H110.417C109.25,156.25 108.333,155.333 108.333,154.167V145.833C108.333,144.666 109.25,143.75 110.417,143.75H118.75C119.917,143.75 120.833,144.666 120.833,145.833V154.167ZM131.25,139.583H122.917C121.75,139.583 120.833,138.667 120.833,137.5V129.167C120.833,128 121.75,127.083 122.917,127.083H131.25C132.416,127.083 133.333,128 133.333,129.167V137.5C133.333,138.667 132.416,139.583 131.25,139.583ZM145.833,154.167C145.833,155.333 144.917,156.25 143.75,156.25H135.417C134.25,156.25 133.333,155.333 133.333,154.167V145.833C133.333,144.666 134.25,143.75 135.417,143.75H143.75C144.917,143.75 145.833,144.666 145.833,145.833V154.167ZM158.333,137.5C158.333,138.667 157.417,139.583 156.25,139.583H147.917C146.75,139.583 145.833,138.667 145.833,137.5V129.167C145.833,128 146.75,127.083 147.917,127.083H156.25C157.417,127.083 158.333,128 158.333,129.167V137.5Z"
        android:fillColor="#FFC107"/>
    <path
        android:pathData="M232.358,160.417C232.667,161.783 232.929,163.167 233.083,164.583C232.929,163.167 232.667,161.783 232.358,160.417Z"
        android:fillColor="#F9A825"/>
    <path
        android:pathData="M237.5,152.083V139.583H233.334V156.25C233.334,158.542 235.208,160.416 237.5,160.416H232.358C232.667,161.783 232.929,163.167 233.084,164.583H241.667V156.25C239.375,156.25 237.5,154.375 237.5,152.083Z"
        android:fillColor="#F9A825"/>
    <path
        android:pathData="M237.5,131.25V125.917L233.333,124.529V131.25H237.5Z"
        android:fillColor="#F9A825"/>
    <path
        android:pathData="M90.692,160.417C91,161.783 91.263,163.167 91.417,164.583C91.263,163.167 91,161.783 90.692,160.417Z"
        android:fillColor="#F9A825"/>
    <path
        android:pathData="M91.416,164.583H158.583C158.737,163.167 158.996,161.784 159.308,160.417H90.692C91,161.783 91.263,163.167 91.416,164.583Z"
        android:fillColor="#F9A825"/>
    <path
        android:pathData="M12.75,160.417H8.333V164.583H16.917C17.071,163.17 17.33,161.787 17.638,160.425C17.629,160.425 17.625,160.417 17.613,160.417C16.667,160.417 12.75,160.417 12.75,160.417Z"
        android:fillColor="#F9A825"/>
    <path
        android:pathData="M54.167,147.917C42.667,147.917 33.333,157.25 33.333,168.75C33.333,180.25 42.667,189.583 54.167,189.583C65.666,189.583 75,180.25 75,168.75C75,157.25 65.666,147.917 54.167,147.917ZM54.167,181.25C47.292,181.25 41.667,175.625 41.667,168.75C41.667,161.875 47.292,156.25 54.167,156.25C61.042,156.25 66.666,161.875 66.666,168.75C66.666,175.625 61.042,181.25 54.167,181.25Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M120.833,145.833V154.167C120.833,155.333 119.917,156.25 118.75,156.25H110.417C109.25,156.25 108.333,155.334 108.333,154.167V145.833C108.333,144.667 109.25,143.75 110.417,143.75H118.75C119.916,143.75 120.833,144.667 120.833,145.833Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M145.833,145.833V154.167C145.833,155.333 144.917,156.25 143.75,156.25H135.417C134.25,156.25 133.333,155.334 133.333,154.167V145.833C133.333,144.667 134.25,143.75 135.417,143.75H143.75C144.917,143.75 145.833,144.667 145.833,145.833Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M158.334,129.167V137.5C158.334,138.667 157.417,139.584 156.25,139.584H147.917C146.75,139.584 145.833,138.667 145.833,137.5V129.167C145.833,128 146.75,127.083 147.917,127.083H156.25C157.417,127.083 158.334,128 158.334,129.167Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M133.333,129.167V137.5C133.333,138.667 132.417,139.584 131.25,139.584H122.917C121.75,139.584 120.833,138.667 120.833,137.5V129.167C120.833,128 121.75,127.083 122.917,127.083H131.25C132.417,127.083 133.333,128 133.333,129.167Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M108.333,129.167V137.5C108.333,138.667 107.417,139.584 106.25,139.584H97.916C96.75,139.584 95.833,138.667 95.833,137.5V129.167C95.833,128 96.749,127.083 97.916,127.083H106.25C107.417,127.083 108.333,128 108.333,129.167Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M165.417,76.791C149.125,75.958 134.542,76.541 121.625,78.583L124.083,68.749H163.417L165.417,76.791Z"
        android:fillColor="#D50000"/>
    <path
        android:pathData="M195.833,147.917C184.333,147.917 175,157.25 175,168.75C175,180.25 184.333,189.583 195.833,189.583C207.333,189.583 216.667,180.25 216.667,168.75C216.667,157.25 207.333,147.917 195.833,147.917ZM195.833,181.25C188.958,181.25 183.334,175.625 183.334,168.75C183.334,161.875 188.958,156.25 195.833,156.25C202.708,156.25 208.333,161.875 208.333,168.75C208.333,175.625 202.708,181.25 195.833,181.25Z"
        android:fillColor="#000000"/>
    <path
        android:pathData="M245.833,147.917V122.917C245.833,121.125 244.667,119.542 243,118.958L219.458,111.125C209.208,94.041 194.75,83.416 174.292,77.833L170.708,63.583C170.25,61.708 168.583,60.417 166.667,60.417H120.833C118.917,60.417 117.25,61.708 116.792,63.583L112.625,80.249C101.417,82.749 91.584,86.499 82.959,91.541C74.293,96.582 66.876,102.833 60.542,110.458C32.875,110.833 4.167,119.542 4.167,135.417V147.917C1.875,147.917 0,149.792 0,152.083V168.75C0,171.042 1.875,172.917 4.167,172.917H20.833C23.125,172.917 25,171.042 25,168.75C25,152.667 38.083,139.583 54.166,139.583C70.249,139.583 83.332,152.667 83.332,168.75C83.332,171.042 85.207,172.917 87.499,172.917H162.499C164.791,172.917 166.666,171.042 166.666,168.75C166.666,152.667 179.749,139.583 195.832,139.583C211.915,139.583 225,152.667 225,168.75C225,171.042 226.875,172.917 229.167,172.917H245.833C248.125,172.917 250,171.042 250,168.75V152.084C250,149.792 248.125,147.917 245.833,147.917ZM194.792,96.209C200.25,100.083 204.958,104.708 209.042,110.417H192.417L194.792,96.209ZM170.125,85.375C176.458,86.959 182.083,89 187.125,91.541L183.958,110.417H138.667L145.042,84.833C152.708,84.625 161,84.75 170.125,85.375ZM124.083,68.75H163.417L165.417,76.791C149.125,75.958 134.542,76.541 121.625,78.583L124.083,68.75ZM136.375,85.291L130.083,110.417H71.75C82.791,99.291 101.208,87.875 136.375,85.291ZM241.667,164.583H233.083C231.042,145.875 215.083,131.25 195.833,131.25C176.583,131.25 160.625,145.875 158.583,164.583H91.416C89.375,145.875 73.416,131.25 54.167,131.25C34.917,131.25 18.958,145.875 16.917,164.583H8.333V156.25C10.625,156.25 12.5,154.375 12.5,152.084V139.583H16.667C18.958,139.583 20.833,137.709 20.833,135.417C20.833,133.125 18.958,131.25 16.667,131.25H14.5C20.125,125.125 37.375,118.75 62.5,118.75H216L237.5,125.917V131.25H233.333C231.042,131.25 229.167,133.125 229.167,135.417C229.167,137.708 231.042,139.583 233.333,139.583H237.5V152.083C237.5,154.375 239.375,156.25 241.667,156.25V164.583Z"
        android:fillColor="#000000"/>
  </group>
</vector>

Felipe Passos

04/28/2021, 1:17 PM

The preview on the file itself is showing with colors as expected

pawegio

04/28/2021, 1:23 PM

Icon

Image

😃 2

Felipe Passos

04/28/2021, 1:25 PM

Oh, okay. I was blinding following the documentation and in the example it uses Icon

Felipe Passos

04/28/2021, 1:25 PM

thank you

pawegio

04/28/2021, 1:25 PM

Icon

applies a tint:

Copy code

tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)

Gabriele Mariotti

07/03/2021, 6:06 PM

Just use

tint= Color.Unspecified

in your

Icon

6 Views

Open in Slack

Previous Next