【问题标题】:Flutter custom icon generator - stroke width not being applied to custom icons font颤振自定义图标生成器 - 笔划宽度未应用于自定义图标字体
【发布时间】:2021-11-29 09:03:17
【问题描述】:

使用https://www.fluttericon.com/时,如何让图标变粗?

我发现他们需要一个stroke-width,所以我将它添加到生成的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
        },

然后单击网站上的“导入”并选择我的config.json 文件。然后我点击下载,ttf文件的图标没有较粗的线条,下载的config.json中缺少stroke-width:(我如何让stroke-width应用于https://www.fluttericon.com/上的图标?

【问题讨论】:

    标签: flutter svg icons truetype flutter-font


    【解决方案1】:

    当您上传带有笔划的自定义 svg 图标时,fluttericon.com 会说:

    如果图像看起来不符合预期,请转换为compound path 手动。

    跳过的标签和属性:stroke,stroke-width,fill

    如果您单击该链接,您将看到使笔触宽度“工作”所需的内容,总而言之,将笔触转换为 Inkscape 或 Illustrator 中的路径。 config.json 不会被您的 Flutter 应用程序读取,因此您所做的任何更改都不会反映在您的应用程序中(此文件适用于 fluttericon.com)。这不会像您想要的那样进行配置,您实际上是在将笔画转换为路径。

    【讨论】:

      猜你喜欢
      • 2019-11-07
      • 2019-03-30
      • 2020-08-09
      • 2014-12-14
      • 2013-08-19
      • 1970-01-01
      • 2020-01-13
      • 2021-09-16
      • 2019-06-10
      相关资源
      最近更新 更多