当前位置：首页 > JavaScript

js实现iconpicker

2026-02-02 04:18:32JavaScript

实现 IconPicker 的 JavaScript 方案

使用现成的库

FontAwesome IconPicker 是一个流行的选择，支持搜索和选择图标。安装方式如下：

npm install fontawesome-iconpicker

初始化代码示例：

import 'fontawesome-iconpicker/dist/css/fontawesome-iconpicker.min.css';
import IconPicker from 'fontawesome-iconpicker';

const iconPicker = new IconPicker('#my-icon-picker', {
    icons: ['fa fa-home', 'fa fa-user', 'fa fa-cog'], // 图标列表
    searchable: true,
    defaultValue: 'fa fa-home'
});

iconPicker.on('change', function(icon) {
    console.log('Selected icon:', icon);
});

自定义实现

创建一个简单的图标选择器需要 HTML 结构和 JavaScript 交互逻辑。

js实现iconpicker

HTML 结构：

<div class="icon-picker">
    <input type="text" id="icon-search" placeholder="搜索图标...">
    <div class="icons-container"></div>
</div>

JavaScript 逻辑：

js实现iconpicker

const icons = ['home', 'user', 'cog', 'envelope'];
const container = document.querySelector('.icons-container');
const searchInput = document.getElementById('icon-search');

// 渲染图标
function renderIcons(filter = '') {
    container.innerHTML = '';
    icons.filter(icon => icon.includes(filter)).forEach(icon => {
        const iconElement = document.createElement('div');
        iconElement.className = 'icon';
        iconElement.innerHTML = `<i class="fa fa-${icon}"></i>`;
        iconElement.addEventListener('click', () => {
            console.log('Selected icon:', icon);
        });
        container.appendChild(iconElement);
    });
}

// 搜索功能
searchInput.addEventListener('input', (e) => {
    renderIcons(e.target.value);
});

renderIcons();

结合 SVG 图标

如果需要使用 SVG 图标，可以修改渲染逻辑：

const svgIcons = {
    home: '<svg>...</svg>',
    user: '<svg>...</svg>'
};

function renderSvgIcons() {
    Object.keys(svgIcons).forEach(key => {
        const iconElement = document.createElement('div');
        iconElement.innerHTML = svgIcons[key];
        container.appendChild(iconElement);
    });
}

样式建议

添加基础 CSS 使图标选择器更美观：

.icons-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.icon {
    padding: 10px;
    cursor: pointer;
}
.icon:hover {
    background: #f0f0f0;
}