Welcome to the world of premium iconography with UIW Icons. This guide will take you through the seamless installation and usage of the UIW Icons in your web or React project. Let’s dive in!

Installation

To get started, you first need to install the UIW Icons package. Open your terminal and execute the following command:

bash
npm install @uiwicons --save

Using UIW Icons in HTML

Once you have installed the package, you can easily refer to the icons using their CSS class names. Follow these steps:

• Visit UIW Icons Documentation to find your desired icon.
• Copy the CSS class name of the icon you want to use. For example, for the Apple icon, the class name would be w-icon-apple.
• Include the CSS stylesheet in your HTML file with this line:

html

• Insert the icon in your HTML like this:

html

Using UIW Icons in React

For those using React, icons can be implemented as components. To do this, you need to install the required dependencies and configure your Webpack. Here’s the step-by-step guide:

• Install the necessary packages:

bash
yarn add @svgr/webpack file-loader

• Configure your webpack.config.js file with the following rules:

javascript
{
    test: /\.svg$/,
    use: [
        {
            loader: require.resolve('@svgr/webpack'),
            options: {
                prettier: false,
                svgo: false,
                svgoConfig: {
                    plugins: [
                        { removeViewBox: false }
                    ]
                },
                titleProp: true,
                ref: true,
            }
        },
        {
            loader: require.resolve('file-loader'),
            options: {
                name: 'static/media/[name].[hash].[ext]',
            },
        }
    ],
    issuer: {
        and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
    },
}

• Now, you can import the SVG icon directly as follows:

javascript
import { ReactComponent as ComLogo } from '@uiwicons/icon/alipay.svg';

Troubleshooting

If you encounter any issues while using UIW Icons, here are some common troubleshooting tips:

• Icons not displaying: Ensure the CSS file link is correctly included in your HTML file.
• Webpack errors: Double-check your Webpack configuration to confirm that the loader options are set correctly.
• SVG import issues: Verify that you have installed all required dependencies for your React setup.
• If problems persist, visit fxis.ai for more insights, updates, or to collaborate on AI development projects.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Conclusion

UIW Icons serve as a fantastic resource for enhancing your project’s design with premium icons. With the straightforward installation process and versatile usage in both HTML and React, you can get started with ease!