Since the 3.9s, Icon's customizability has become lower and lower

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Before 3.9, I can directly modify the default icon style with my custom style without changing the framework code, but I can no longer use it after 3.9, for example:

/* <= 3.8.x */
.my-custom-class .ant-select-selection__rendered > ul {
    padding-right: 10px;
}
.my-custom-class .ant-select-selection__rendered::before {
    display: inline-block;
    -webkit-animation: loadingCircle 1s infinite linear;
    animation: loadingCircle 1s infinite linear;
    content: "\E64D";
    color: #1890ff;
    position: absolute;
    pointer-events: none;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    font-family: anticon;
    visibility: visible;
    /* and xxx... */
}

The function that this style wants to achieve is to add a loading animation to the right of the Select component without destroying the original framework code, but after 3.9 I want to implement this function, there is no idea at all. You might tell me to use content: url(loading.svg), but the defect is that there is no custom svg color.

Throughout the industry’s usage, such as fontawesome, they provide both font-family and svg forms. Obviously they have more practical experience.

What does the proposed API look like?

The Icon component either provides two ways of using (svg children and pseudo-element content font-family), or gives up using svg. Just like this:

// font-family
<Icon.Font type="loading" />

// svg
<Icon.Svg type="loading" />

For ant-design code, Icon.Font is used by default.

[Hughen]

@HeskeyBaozi Maybe I didn’t express it clearly. I want to talk about such a problem: I can’t modify the style without destroying or modifying the ant-design code with svg. OK, now the Select component looks like I have this feature, and for other components, I can’t guarantee that all components have this advanced customization capability.

[Hughen]

After reading this post #10353 , I have a clearer idea to refute you.

Bg:

Svg is superior to font in imaging and supports multiple colors. We can see that the Icon component has been added to the mixed color mode. That’s very nice. All the components of the ant-design library, as long as they contain the icon display, start to adopt svg, then the problem arises, in order to adapt the developer’s needs for custom icons. Are you still busy developing a batch of interfaces in order to allow them to control svg.

For example, I added a loading style to the Select component which I mentioned earlier. When ant-design does not introduce the suffix interface, I can use the pseudo-element to easily inherit from the existing library to the loading style. But now, what should I do? This is my implementation plan:

1. Introduce fonts from third parties;

2.  .my-costom-class svg {
        display: none;
    }
   

3.  .my-costom-class::before {
        content: "\ABCD";
        font-family: third-party-font;
    }
   

I always feel that this way is more unacceptable than the way I used to.

What is your plan for the next version?