ant-design ant-design-icons: ⭐ Ant Design SVG Icons

Table Of Content

• 关于 SVG 图标
• Ant Design of React
• Fontelico
• Trending on DEV Community
• Folders and files

Antd provides a built-in ts definition, don't install @types/antd. We provide antd.js and antd.min.js reset.css under dist folder in antd's npm package. You can also download these files directly from , or unpkg. Contour lines play an important role in making various icons with the same visual effect.

关于 SVG 图标

Specify the spin property to show spinning animation and the theme property to switch between different themes. The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly). When using the two-tone icons, you can use the static methods getTwoToneColor() and setTwoToneColor(colorString) to specify the primary color. You can still set style and className for size and color of icons.

Ant Design of React

You can set twoToneColor prop to specific primary color for two-tone icons. Import icons from @ant-design/icons, component name of icons with different theme is the icon name suffixed by the theme name. We strongly discourage loading the entire files this will add bloat to your application and make it more difficult to receive bugfixes and updates.

Fontelico

There are two kinds of business icon, single-color (neutral color) and double-color (neutral color + primary color), the area of primary color does not exceed 40% of the entire icon. Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity. Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. You can import SVG icon as a react component by using webpack and @svgr/webpack. Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.

Antd is intended to be used in conjunction with a build tool, such as webpack, which will make it easy to import only the parts of antd that you are using. Following the Ant Design specification, we developed a React UI library antd that contains a set of high quality components and demos for building rich, interactive user interfaces. On the library documentation, you can find the list of applications available to you here. You can find icons in three categories, outlined, filled and two-toned. When using the two-tone icons, you can use the static methods Icon.getTwoToneColor() and Icon.setTwoToneColor(colorString) to specify the primary color. Use tag to create an icon and set its type in the type prop.

By default, icons are deployed at iconfont.cn, publicly available repository of a huge set of icons. In case you need to use a locally deployed version of the icon font, you can refer to this example。 You can use scriptUrl as an array after @ant-design/, manage icons in one from multiple iconfont.cn resources. If icon with a duplicate name in resources, it will overrided in array order. You can import it directly or destructure from @ant-design/icons when tree-shaking enabled.

Gitlab SVGs

If icon with a duplicate name in resources, it will overridden in array order. The property component takes a React component that renders to svg element. We still have three different themes for icons, icon component name is the icon name suffixed by the theme name. React is used to encapsulate a library of components which embody our design language. We welcome the community to implement our design system in other front-end frameworks of their choice.

While you wait, you can use webpack plugin from the community to chunk the icon file. Now, you are able to access the alternative icon library via the assets panel. Icons that follow Ant Design should have rounded corners and edges using a 72px radius. In normal use, there are 32px (minimum size), 48px and 64px (maximum size) three options.

New Wave Icon is Still King of the Wild Frontier - The Paper

New Wave Icon is Still King of the Wild Frontier.

Posted: Fri, 29 Mar 2024 07:00:00 GMT [source]

⚠️ Given the extra bundle size caused by all SVG icons imported in 3.9.0, we will provide a new API to allow developers to import icons as needed, you can track #12011 for updates. Business icons, unlike system icons, do not themselves have functional operations, but rather an abstraction that assists with copywriting. Compared to the system icon, the business icon is more rich in the details of the design, the size of the use of relatively large. For example, icons inline with 12pt font should be 12px in size with 8px of spacing. Specify the property theme to twoTone to render two-tone icons.

You can now use this icon as a component changing the colour as you wish or two colours if you chose a two-toned icon, e.t.c. Icons should be scaled according to the text size, according to the Ant Design specification. Please make all icons in the 1024×1024 resolution (16×16 64 times).

Icons should not have a sense of depth nor a large amount of detail. If you are using iconfont.cn, you can use the icons in your project gracefully. The property scriptUrl should be set to import the SVG sprite symbols. If you'd like to help us improve antd, just create a Pull Request. Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.

You can set style and className for size and color of icons because they are still fonts in essence. Ant Design is an amazing React UI library of flexible high-quality reusable components. However, if you’re not familiar with the library trying to use the icons in a react application can take you a minute or two to figure out.