FontAwesome Icon Picker

A lightweight and customizable icon picker for selecting FontAwesome icons, built with JavaScript, Bootstrap 5, and Webpack.

Features

• FontAwesome Integration: Supports free icons from @fortawesome/fontawesome-free.
• Responsive Design: Built with Bootstrap 5 for a mobile-friendly UI.
• Dynamic Icon Loading: Loads icons dynamically using fetch.
• TypeScript Support: Includes type definitions for TypeScript projects.
• Flexible Usage: Supports ES modules or global script inclusion.

Installation

npm install @maxsoft/fontawesome-iconpicker @fortawesome/fontawesome-free bootstrap

Usage

ES Module (Recommended)

1. Include HTML:

   <div class="container mt-5">
     <h1>FontAwesome Icon Picker</h1>
     <div class="input-group mb-3">
       <input type="text" id="myIconInput" class="form-control" placeholder="Kliknij, aby wybrać ikonę" readonly>
       <span class="input-group-text" id="selectedIconDisplay"></span>
     </div>
   </div>
   <div class="modal fade" id="iconPickerPopup" tabindex="-1" aria-labelledby="iconPickerModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="iconPickerModalLabel">Wybierz ikonę FontAwesome</h5>
           <button type="button" class="btn-close" id="closePopup" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <div class="modal-body">
           <div id="iconList" class="icon-list"></div>
         </div>
       </div>
     </div>
   </div>

2. Add Styles:

   .icon-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
     gap: 10px;
     max-height: 400px;
     overflow-y: auto;
     padding: 10px;
   }
   .icon-list div {
     display: flex;
     justify-content: center;
     align-items: center;
     transition: background-color 0.2s;
   }
   .icon-list div:hover {
     background-color: #f0f0f0;
   }

3. Import in JavaScript/TypeScript:

   import initializeIconPicker from '@maxsoft/fontawesome-iconpicker';
   import '@fortawesome/fontawesome-free/css/all.css';
   import 'bootstrap/dist/css/bootstrap.min.css';
   import './styles.css';
   
   initializeIconPicker('#myIconInput');

4. Include Bootstrap:

   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Using with Vite

To ensure the JSON file loads correctly in Vite:

1. Copy JSON to public/ (workaround):

   mkdir -p public/json
   cp node_modules/@maxsoft/fontawesome-iconpicker/dist/json/fontawesome-free-all.json public/json/

2. Or Configure vite.config.js:

   import { defineConfig } from 'vite';
   import path from 'path';
   
   export default defineConfig({
     assetsInclude: ['**/*.woff', '**/*.woff2'],
     server: {
       fs: {
         allow: ['.', './node_modules']
       }
     },
     resolve: {
       alias: {
         '/json/fontawesome-free-all.json': path.resolve(__dirname, 'node_modules/@maxsoft/fontawesome-iconpicker/dist/json/fontawesome-free-all.json')
       }
     }
   });

Global Script (Alternative)

1. Include Script:

   <script src="node_modules/@maxsoft/fontawesome-iconpicker/dist/iconPicker.js"></script>
   <script>
     IconPicker('#myIconInput');
   </script>

License

MIT License. See LICENSE for details.

Acknowledgments

• FontAwesome for the icon library.
• Bootstrap for the responsive UI framework.
• Webpack for bundling.

Happy icon picking! 🚀