React-native-vector-icons: Multicolor icons fonts with icomoon

[sarovin]

How i can generate a multicolor icon?
i have added this icon to icomoon

and it generated this selection.json

{
      "icon": {
        "paths": [
          "M768.043 1002.667c71.296-51.755 191.957-161.237 191.957-243.072 0-66.347-48.341-105.941-95.061-105.941-51.968 0-71.296 35.797-96.939 78.208-25.685-42.411-45.013-78.208-96.939-78.208-46.72 0-95.061 39.637-95.061 105.941 0 81.835 120.661 191.317 192.043 243.072v0 0z",
          "M660.629 130.987c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667v0zM660.629 258.987c47.061 0 85.333-38.272 85.333-85.333s-38.272-85.333-85.333-85.333c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333v0zM790.037 271.616l-502.101 511.659-236.501-237.739 501.12-502.869h237.483v228.949zM832.704 280.32v-258.987c0-11.819-9.515-21.333-21.333-21.333h-267.691c-5.675 0-11.136 2.219-15.147 6.272l-522.325 524.203c-8.277 8.32-8.277 21.76 0 30.080l266.667 268.16c4.011 4.011 9.472 6.272 15.147 6.272h0.085c5.675 0 11.136-2.347 15.104-6.357l523.392-533.333c3.883-4.011 6.101-9.387 6.101-14.976v0zM786.325 976.128c-84.437-63.872-170.667-155.733-170.667-216.576 0-52.949 37.461-84.608 73.728-84.608 36.139 0 50.048 20.352 75.52 62.677l3.2 5.248c7.723 12.757 28.715 12.757 36.48 0l3.157-5.248c25.515-42.325 39.381-62.677 75.563-62.677 36.224 0 73.685 31.659 73.685 84.608 0 60.8-86.187 152.661-170.667 216.576v0zM883.307 632.277c-49.536 0-75.819 27.179-96.981 59.051-21.163-31.872-47.403-59.051-96.939-59.051-57.216 0-116.395 47.616-116.395 127.275 0 111.531 180.309 245.461 200.832 260.395 3.755 2.688 8.192 4.053 12.544 4.053 4.437 0 8.789-1.408 12.544-4.096 20.565-14.933 200.747-148.907 200.747-260.352 0-79.659-59.136-127.275-116.352-127.275v0z"
        ],
        "attrs": [
          {
            "fill": "rgb(237, 64, 62)"
          },
          {
            "fill": "rgb(0, 0, 0)"
          }
        ],
        "isMulticolor": true,
        "isMulticolor2": false,
        "grid": 0,
        "tags": [
          "list-to-eat"
        ],
        "colorPermutations": {
          "1129207541198208213123764621255171013850561": [
            {
              "f": 4
            },
            {
              "f": 0
            }
          ]
        }
      },
      "attrs": [
        {
          "fill": "rgb(237, 64, 62)"
        },
        {
          "fill": "rgb(0, 0, 0)"
        }
      ],
      "properties": {
        "order": 35,
        "id": 44,
        "name": "list-to-eat",
        "prevSize": 32,
        "code": 59686,
        "codes": [
          59686,
          59687
        ]
      },
      "setIdx": 0,
      "setId": 0,
      "iconIdx": 33
    },

but i see this in my app

[oblador]

I'm guessing it's an issue with your source file: borders/lines are not supported. But ultimately I'm not sure if multiple colors are supported by Icomoon.

[tofrookie]

@sarovin +1 how to multi color, do you solve it

[anubhavDaffodil]

+1 Same issue

[cooperka]

IcoMoon gives me the following warning when downloading my font:

Multicolor glyphs take more than one character code and cannot have ligatures.

Font glyphs cannot have more than one color by default. Using CSS, IcoMoon stacks multiple glyphs on top of each other to implement multicolor glyphs. As a result, these glyphs take more than one character code and cannot have ligatures.

To avoid multicolor glyphs, re-import your SVG after changing all its colors to a single color.

This won't work unfortunately :(

Instead I'm using individual SVG files with react-native-svg-uri. It works! 👍

[oblador]

Closing this as it's not actionable for me.