IconIx

Getting Started

Include style

                    
                        

                            <!-- Include FontAwesome 5.15.3 -->
                            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.css" />

                            <!-- Include css -->
                            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icon-ix@2.0.0/dist/css/iconix.min.css">

                        
                    
                

Include script

                    
                        
                            
                            <!-- Include iconset js -->
                            <script src="https://cdn.jsdelivr.net/npm/font-awesome-iconset@5.15.0/dist/iconset.min.js"></script>
                            
                            <!-- Include  js -->
                            <script src="https://cdn.jsdelivr.net/npm/icon-ix@2.0.0/dist/js/iconix.min.js"></script>

                        
                    
                

Set up markup

                    
                        
                            <!-- Picker start buton -->
                            <button id="your-picker"></button>

                            <!-- Picker preview container -->
                            <div id="your-preview"></div>

                            <!-- Picker output -->
                            <input id="your-output" />
                        
                    
                

---

Simple start

                    
                        
                            <!-- Picker start buton -->
                            <button id="picker"></button>

                            <!-- Picker preview container -->
                            <div id="preview"></div>

                            <!-- Picker output -->
                            <input id="output" />
                        
                    
                

                    
                        new IconIx('#picker');
                    
                

---

Start with options

                    
                        
                            <!-- Picker start buton -->
                            <button id="your-picker"></button>

                            <!-- Picker preview container -->
                            <div id="your-preview"></div>

                            <!-- Picker output -->
                            <input id="your-output" />
                        
                    
                

                    
                        // default option
                        let option = {
                            title: "Your Title",
                            picker: '#your-picker',
                            output: "#your-output",
                            preview: "#your-preview",
                
                            page_size: 50,
                
                            searchPlaceholder: "Search icon 👽",
                            paginatorNextButton: "👽",
                            paginatorPrevButton: "👽",
                
                            header:true,
                            paginate: true,
                            searchable: true,
                            hideOnSelect:true,
                
                            iconSize: '45px',
                            iconMargin: '5px',
                            iconPadding: '5px',
                            iconFontSize: '30px',
                        };
                
                
                        new IconIx(option);