ant-design / ant-design-icons

⭐ Ant Design SVG Icons
https://ant.design/components/icon/
MIT License
951 stars 581 forks source link

[Question] Is there a `prefixCls` option? #248

Open matzeeable opened 4 years ago

matzeeable commented 4 years ago

Hi!

Yesterday I updated two of my repositories to antd@4. I noted that icons are now overlapped because another library is still using antd@3.8.4 (no update possible, yet). I decided to go the way to "brand" antd to my own, that means I use the prefixCls option (https://ant.design/components/config-provider/#API) and modifyVars in less-loader. Unfortunately ant-design/icons still uses anticon class name.

I just want to ask if there is a way to inherit the classname from the above variables? Currently I am using string-replace-loader to workaround this.

Best regards, Matthew 🙂

OnurGvnc commented 3 years ago

Hi I solved it like this

import { IconProvider } from '@ant-design/icons/es/index'

export default function App({ children }) {

  return (
    <IconProvider value={{ prefixCls: 'anticon' }}>
      {children}
    </IconProvider>
  )
}

https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less#L106

@iconfont-css-prefix: anticon;

gpeshans commented 2 years ago

Hi!

Yesterday I updated two of my repositories to antd@4. I noted that icons are now overlapped because another library is still using antd@3.8.4 (no update possible, yet). I decided to go the way to "brand" antd to my own, that means I use the prefixCls option (https://ant.design/components/config-provider/#API) and modifyVars in less-loader. Unfortunately ant-design/icons still uses anticon class name.

I just want to ask if there is a way to inherit the classname from the above variables? Currently I am using string-replace-loader to workaround this.

Best regards, Matthew 🙂

Hey @matzeeable! I know that this is a very old comment/question, but, if possible, can you please share (loader configuration) how you use the string-replace-loader for the workaround you mentioned? Best, gp