Flutter custom icon generator - stroke width not being applied to custom icons font

1.4k views Asked by At

When using https://www.fluttericon.com/, how can I make the icons thicker?

I found that they need a stroke-width so I added that to the generated config.json:

        "svg": {
            "path": "M92.5 294.3C92.8 294.3 93.1 294.3 93.5 294.3 101.7 293.8 107.8 286.7 107.3 278.5L102 198.5C101.5 190.4 94.4 184.2 86.3 184.7 78.1 185.2 71.9 192.3 72.4 200.5L77.7 280.5C78.2 288.3 84.7 294.3 92.5 294.3ZM92.5 294.3M150.3 296.7C150.7 296.7 151 296.7 151.3 296.7 159.5 296.1 165.7 289.1 165.1 280.9L159.9 200.9C159.3 192.7 152.3 186.6 144.1 187.1 135.9 187.6 129.8 194.7 130.3 202.9L135.6 282.9C136.1 290.7 142.6 296.7 150.3 296.7ZM150.3 296.7M208.2 299.1C208.5 299.1 208.8 299.1 209.2 299 217.3 298.5 223.5 291.5 223 283.3L217.7 203.3C217.2 195.1 210.2 188.9 202 189.5 193.8 190 187.6 197.1 188.1 205.2L193.4 285.2C193.9 293.1 200.4 299.1 208.2 299.1ZM208.2 299.1M707.5 738.5C705.3 705.3 683.7 662.8 639.6 604.7 634.7 598.2 625.4 597 618.8 601.9 612.3 606.9 611 616.2 616 622.7 622 630.5 627.4 638 632.5 645.3 605 659.7 552.4 697.1 521.9 782.3 488.9 731.5 439.8 675.8 394.4 624.3 359.6 584.9 326.6 547.5 311.8 523.5L350.8 407C352.1 403.1 351.7 398.8 349.8 395.2 347.8 391.6 344.3 388.9 340.3 387.9L282.9 373.7C276.1 292 273.7 198.8 273.4 151.7 273.3 143.6 266.7 137 258.6 137L253.8 137 248.9 62C248.3 53.8 241.3 47.7 233.1 48.2 224.9 48.7 218.7 55.8 219.3 63.9L224.1 136.9 209 136.9C206.2 91.4 202.1 51.2 199.7 29.7L390.7 30.1C391.1 56.3 392.3 113.9 395.7 175.6 402 289.1 412.7 361.8 427.4 391.7 440.4 418.3 476.8 459.6 519 507.4 538.9 530 559.5 553.3 579.4 577 582.3 580.5 586.5 582.3 590.7 582.3 594.1 582.3 597.5 581.2 600.2 578.9 606.5 573.6 607.3 564.2 602.1 558 582 534 561.3 510.5 541.2 487.8 502.2 443.5 465.3 401.7 454 378.7 437 344.1 428.8 235.7 425.3 174.1 420.8 91.4 420.2 16 420.2 15.2 420.2 7.1 413.5 0.5 405.4 0.5L183.1 0C183.1 0 183 0 183 0 178.8 0 174.7 1.8 171.9 5 169.1 8.2 167.8 12.5 168.3 16.7 168.4 17.3 175.2 71 179.3 136.8L36.3 136.5C36.2 136.5 36.2 136.5 36.2 136.5 32 136.5 27.9 138.3 25.1 141.5 22.3 144.7 21 149 21.5 153.2 21.6 154.3 34.7 257.6 35.3 354 35.4 362.1 42 368.7 50.1 368.7H50.2C58.4 368.6 65 362 65 353.8 64.5 278.8 56.7 199.9 52.9 166.2L243.9 166.6C244.8 229 250.1 466.2 280.5 528.3 293.6 554.8 330 596.1 372.1 643.9 410.5 687.3 454 736.7 485.8 781.8 456.4 797.1 398.2 838.7 369.2 937.1 367.6 935.8 366 934.4 364.4 933.1 326.2 899.6 290.7 858 256.3 817.7 220.2 775.4 185.5 734.7 149.7 705.6L204 543.6C205.3 539.7 204.9 535.4 202.9 531.7 200.9 528.1 197.5 525.5 193.5 524.5L51.9 489.4C57.6 470.1 61.4 445.3 63.4 414 63.9 405.9 57.7 398.8 49.6 398.3 41.4 397.8 34.3 404 33.8 412.2 31.5 449.1 26.4 476.6 18.8 493.8-22.1 585.9 4 658.7 94.3 704.2 140.4 727.4 185.7 780.6 233.8 837 268.8 878 305.1 920.5 344.8 955.4 378.3 984.7 415.4 1000 450.3 1000 467.7 1000 484.6 996.2 500.3 988.5 540.8 968.5 563.9 925 560.6 875 560.3 869.3 559.3 863.3 557.7 857.1 571.1 861.2 584.4 863.2 597.4 863.2 618.6 863.2 638.7 857.8 656.3 846.9 691.4 825 710.5 784.5 707.5 738.5ZM317.6 412.9L296 477.4C291.9 457.3 288.6 432.3 285.8 405ZM41.2 517.3L170.8 549.4 124.6 687.4C119 683.9 113.4 680.6 107.7 677.8 35.6 641.4 13.7 588.8 41.2 517.3ZM487.2 961.9C460 975.3 427.1 972.4 395 954.8 411.8 891.5 441.6 854 464.2 833.3 479.4 819.4 493.4 811.1 502.4 806.7 518.9 833.2 529.8 857.5 531.1 877 533.6 915.4 517.2 947.1 487.2 961.9ZM640.6 821.7C613.3 838.7 578 837.7 543.2 819 542.8 818.3 542.5 817.6 542.2 817 559.3 753.5 589.5 716 612.2 695.7 626.9 682.5 640.3 674.6 649 670.2 667 699.3 676.7 722.8 677.9 740.4 680.2 775.9 666.6 805.5 640.6 821.7ZM640.6 821.7M291 50.6C282.8 51.1 276.6 58.2 277.1 66.3L282.4 146.3C282.9 154.2 289.4 160.2 297.2 160.2 297.5 160.2 297.8 160.2 298.2 160.1 306.3 159.6 312.5 152.5 312 144.4L306.7 64.4C306.2 56.2 299.1 50 291 50.6ZM291 50.6M348.8 52.9C340.6 53.5 334.4 60.5 335 68.7L340.2 148.7C340.8 156.5 347.3 162.6 355 162.6 355.3 162.6 355.7 162.5 356 162.5 364.2 162 370.4 154.9 369.8 146.8L364.6 66.7C364 58.6 357 52.4 348.8 52.9ZM348.8 52.9",
            "width": 1000,
            "stroke-width": 50
        },

and then clicked "import" on the website and selected my config.json file. Then I clicked download, and the ttf files' icons do not have thicker lines, and the stroke-width is missing from the downloaded config.json :( How do I get the stroke-width to apply to the icons on https://www.fluttericon.com/?

1

There are 1 answers

0
mike On BEST ANSWER

When you upload a custom svg icon with strokes, fluttericon.com says:

If image looks not as expected please convert to compound path manually.

Skipped tags and attributes: stroke,stroke-width,fill

If you click the link you'll see what you need to make the stroke-width "work", in summary, convert the strokes to paths in Inkscape or Illustrator. config.json is not read by your Flutter application so nothing you change there will be reflected in your app (this file is for fluttericon.com). This won't be configurable like you intend, you are literally converting the stroke to a path.