MK Assets

MK Icons and Assets Library

Overview

MK Assets is a comprehensive library designed to manage and streamline the use of icons and assets in your projects. Whether you're working on a website, application, or any digital product, MK Assets provides an organized and efficient solution to handle your assets with ease.

Features

• Centralized Asset Management: Store, manage, and access all your icons and assets in one place.
• Scalable Icon Library: SVG-based icons for scalability and quality on various screen sizes and resolutions.
• Customizability: Easily customize icons and assets to match your project’s design system.
• Prettier Integration: Maintains a consistent code style with built-in Prettier support.
• React Compatibility: Designed to work seamlessly with React projects for easy integration.
• Optimized Performance: Lightweight and optimized for fast loading times.

Installation

To use MK Assets in your project, you can install it using Yarn:

yarn add mk-assets

Alternatively, if you're using npm, you can install it with the following command:

npm install mk-assets

Usage

Here's how to get started with MK Assets in your project:

Import an Asset

To use an asset in your React component, simply import it:

import MyIcon from './path/to/icon.svg';

const App = () => (
  <div>
    <MyIcon width="50" height="50" />
  </div>
);

export default App;

Using with the MK Asset Library

If MK Assets is integrated as part of your library, you can directly import assets:

import { IconName } from 'mk-assets';

const App = () => (
  <div>
    <IconName color="blue" size="32" />
  </div>
);

export default App;

Configuration

Custom Configuration with Webpack

If you're using Webpack, ensure the correct loaders are configured for SVG imports. Here's an example setup:

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
    ],
  },
};

With Babel

Enable SVG processing in your Babel configuration:

module.exports = {
  plugins: ['@svgr/babel-plugin-replace-jsx-attribute-value', '@svgr/babel-plugin-remove-jsx-attribute'],
};

Development

Prerequisites

To contribute to MK Assets, make sure you have the following installed:

• Node.js (>= 14.x)
• Yarn package manager

Running Locally

Clone the repository:

git clone https://github.com/your-repo/mk-assets.git

Install dependencies:

yarn install

Start the development server:

yarn start

Build Process

To build the project for production:

yarn build

Linting and Prettier

Ensure the code meets style standards:

yarn lint
yarn prettier --write .

Testing

Run the test suite:

yarn test

Contributing

We welcome contributions! Please follow these steps to contribute to MK Assets:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/your-feature).
5. Create a pull request.

License

MK Assets is licensed under the MIT License.

Contact

For any questions or support, feel free to reach out:

• Email: [email protected]
• GitHub: MK Assets Repository