Use multi-color icons in fluent. Take iconfont as an example

Time:2021-8-5

Movie playback software written by fluent:https://github.com/Mockingbird1234/skapp

Open source is not easy. Give it to star if you are interested.

Multicolor Icon

There are many customized icons in fluent. I usually find the icons in fluent on this website:https://www.fluttericon.com/

This icon only supports solid color. If you can’t design and need multi-color icons, you can use Alibaba’s icon library:https://www.iconfont.cn/

Using iconfont in fluent

The following is an explanation of the multicolor icons used in iconfont in my project, mainly using githut, an open source project:https://github.com/iconfont-cli/flutter-iconfont-cli, you can read the readme file of the open source project and build it step by step.

1. In project documentspubspec.ymlAdd the fluent plug-in influtter_svg

{
  ...

  dependencies:
    #The version number shall be subject to the of the official library: https://github.com/dnfield/flutter_ svg/tags
    flutter_svg: ^0.14.1
  ...
}

be careful: hereflutter_svgBest use0.17.3After testing, this version will not have any problems, and other versions may report errors.

Then perform the installation of the shuttle plug-in

flutter packages get

Then install the global plug-in (based on nodejs)

npm install flutter-iconfont-cli -g

2. Generate configuration file

npx iconfont-init

The project root generates aiconfont.jsonThe contents of the document are as follows:

{
    "symbol_ URL ":" please refer to readme.md and copy the JS link provided on the official website ",
    "save_dir": "./lib/iconfont",
    "trim_icon_prefix": "icon",
    "default_icon_size": 18,
    "summary_component_name": "IconFont"
}

Description of configuration parameters:

symbol_url: please copy directlyiconfontProject links provided on the official website. Please be sure to see that it is.jsSuffix instead of. CSS suffix. If you haven’t created an iconfont repository yet, you can fill in this link to test:http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js

save_dir: the location where components generated from iconfont icons are stored. The folder is emptied before each component is generated.

trim_icon_prefix: if your icon has a common prefix and you don’t want to write it repeatedly, you can remove the prefix uniformly through this configuration.

default_icon_size: we will add the default font size for each generated icon component. Of course, you can also change the size value by passing props.

summary_component_name: is the name of the summary component. The default name is iconfont. You can also change it to icon or your favorite name. Remember, it is a class name. You must follow the syntax rules of dart for class names. Please try to start with uppercase letters.

3. Start generating react standard components

npx iconfont-flutter

After generation, check whether the saved directory you set contains all icons

4. Use

Icon size

According to configurationdefault_icon_size, each icon will have a default size that you can override at any time.

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return IconFont(IconNames.alipay, size: 100);
    }
}

Icon monochrome

The icon will not be rendered with a monochrome value, if the original color is not specified. If you want to set it to another color, just set a color you want.

Note: if the color you pass in props is a string rather than an array, even the original multi-color icon will become a monochrome icon.

IconFont(IconNames.alipay, color: 'red');

Icon multi color

Multicolor icon. If you do not specify a color value, the icon will render the original multicolor. If you want to set other colors, set a set of colors you want

IconFont(IconNames.alipay, colors: ['green', 'orange']);

The number and sorting of color groups need to be determined according to the information of the current icon. You need to view the component icon and draw a conclusion.

Update Icon

When your icon in iconfont.cn changes, you only need to change the configuration symbol_ URL, and then execute step 3 again to generate the latest icon component

#Modify symbol_ Execute after URL configuration:
npx iconfont-flutter

The above contents are fromhttps://github.com/iconfont-cli/flutter-iconfont-cli

Effect display

Use multi-color icons in fluent. Take iconfont as an example

More effects are welcomehttps://github.com/Mockingbird1234/skappDownload the realease version of the software to view.