Material Icons 搜索器

我心飞翔1995

日常开发NiceGUI程序的过程中，发现icon用的Material Icons图标字体需要访问谷歌，中国大陆没法访问，我又一直遵纪守法。没办法，只好想办法自制一个Material Icons图标字体搜索预览工具。代码是基于NiceGUI做的，后续NiceGUI官方会推出Icon模块，图标字体使用会方便一些，目前可以先用这个顶一顶。首先要从 https://github.com/google/material-design-icons/archive/master.zip 下载Material Icons字体的源代码，然后解压。接着就是用下面的代码生成图标字体的全部名字字典，里面的main path 部分记得替换，根据上面的解压目录修改。当然，我这边也生成了一份结果文件，懒得生成的可以点我下载

[Python] 纯文本查看 复制代码

import os


icon_name_dict = {}
map_name1 = {
    'materialiconstwotone': '',
    'materialicons': '',
    'materialiconsoutlined': 'o_',
    'materialiconsround': 'r_',
    'materialiconssharp': 's_',
}
map_name2 = {
    'materialsymbolsoutlined':'sym_o_', 
    'materialsymbolsrounded':'sym_r_', 
    'materialsymbolssharp':'sym_s_'
}

# main path:
sym_path = 'e:/Projects/material-design-icons-master/symbols/android'
src_path = 'e:/Projects/material-design-icons-master/src'
result_path = f'{os.path.dirname(os.path.abspath(__file__))}/result.txt'

# search name:
# https://fonts.google.com/icons?icon.set=Material+Icons
# source code link:
# https://github.com/google/material-design-icons/archive/master.zip

for names in os.listdir(src_path):
    for name in os.listdir(src_path+f'/{names}'):
        icon_name_dict.update({name: []})
        for typ in os.listdir(src_path+f'/{names}/{name}'):
            icon_name_dict[name].append(map_name1[typ])

for name in os.listdir(sym_path):
    if name not in icon_name_dict.keys():
        icon_name_dict.update({name: []})
    for typ in os.listdir(sym_path+f'/{name}'):
        icon_name_dict[name].append(map_name2[typ])

for k in icon_name_dict.keys():
    icon_name_dict[k] = list(set(icon_name_dict[k]))

with open(result_path, 'w') as f:
    f.write(str(icon_name_dict))

生成的结果文件和下面的代码放在同一目录执行即可，代码需要nicegui库，会python自己安装，这里不赘述：

[Python] 纯文本查看 复制代码

from nicegui import ui
import os

result = {}
with open(f'{os.path.dirname(os.path.abspath(__file__))}/result.txt') as f:
    result = eval(f.read())

icon_name_list = list(result.keys())


with ui.row():
    icon_name = ui.select(icon_name_list, value='3d_rotation',label='icon name:', with_input=True).classes('w-64')
    zoom_spec = ui.switch().tooltip('show bigger icon')

@ui.refreshable
def icon_type():
    icon_prefix = ui.select(result[icon_name.value], value=result[icon_name.value][0], label='icon type:').classes('w-64')
    icon_prefix.bind_visibility_from(zoom_spec,'value')
    @ui.refreshable
    def icon_type_card():
        with ui.card().bind_visibility_from(zoom_spec,'value'):
            with ui.column():
                ui.label(icon_prefix.value+icon_name.value+':')
                ui.icon(icon_prefix.value+icon_name.value, size='10em')

    icon_type_card()
    icon_prefix.on_value_change(icon_type_card.refresh)

icon_type()


@ui.refreshable
def demo():
    with ui.card().bind_visibility_from(zoom_spec,'value',lambda x:not x):
        ui.label(icon_name.value+':')
        with ui.row():
            for i in sorted(result[icon_name.value]):
                with ui.icon(i+icon_name.value, size='3em'):
                    ui.tooltip(i+icon_name.value).tailwind.font_size('sm')

demo()
icon_name.on_value_change(demo.refresh)
icon_name.on_value_change(icon_type.refresh)

ui.run(native=True,title='Material Icons Search')

界面如图：




PS：2024/09/19，更新了新的界面，分为三种搜索方式，指定图标的全部风格预览、指定图标名称和风格的大图预览、指定图标风格和名称的大图预览。

[Python] 纯文本查看 复制代码

from nicegui import ui
import os

result = {}
with open(f'{os.path.dirname(os.path.abspath(__file__))}/result.txt') as f:
    result = eval(f.read())

icon_name_dict = result
icon_name_list = list(icon_name_dict.keys())
icon_name_dict_typed = {'':[],'o_':[],'r_':[],'s_':[],'sym_o_':[],'sym_r_':[],'sym_s_':[],}
for i in icon_name_list:
    for k in icon_name_dict[i]:
        icon_name_dict_typed[k].append(i)
        
type_name_map = {'':'Filled',
                 'o_':'Outline',
                 'r_':'Round',
                 's_':'Sharp',
                 'sym_o_':'Outline symbol',
                 'sym_r_':'Round symbol',
                 'sym_s_':'Sharp symbol',}

current_name = ''
current_type = ''

def all_show(icon_name = None,icon_type = None):
    with ui.card():
        ui.label(icon_name+':')
        with ui.column():
            with ui.row() as row1:
                label1= ui.label('This name has no filled icon.')
            with ui.row() as row2:
                label2= ui.label('This name has no styled icon.')
            with ui.row() as row3:
                label3= ui.label('This name has no symbol icon.')
            for prefix in icon_type:
                if prefix in ['o_','r_','s_']:
                    label2.set_text('Styled:')
                    with row2,ui.icon(prefix+icon_name, size='3em').on('click',lambda :(ui.clipboard.write(prefix+icon_name),ui.notify('name copied!'))):
                        ui.tooltip(prefix+icon_name).tailwind.font_size('sm')
                elif prefix in ['sym_o_','sym_r_','sym_s_']:
                    label3.set_text('Symbol:')
                    with row3,ui.icon(prefix+icon_name, size='3em').on('click',lambda :(ui.clipboard.write(prefix+icon_name),ui.notify('name copied!'))):
                        ui.tooltip(prefix+icon_name).tailwind.font_size('sm')
                else:
                    label1.set_text('Filled:')
                    with row1,ui.icon(prefix+icon_name, size='3em').on('click',lambda :(ui.clipboard.write(prefix+icon_name),ui.notify('name copied!'))):
                        ui.tooltip(prefix+icon_name).tailwind.font_size('sm')

def bigger_show(icon_name = None,icon_type = None):
    with ui.card():
        with ui.column():
            ui.label(icon_name+f' of {type_name_map[icon_type]}'+':')
            with ui.icon(icon_type+icon_name, size='10em').on('click',lambda :(ui.clipboard.write(icon_type+icon_name),ui.notify('name copied!'))):
                ui.tooltip(icon_type+icon_name).tailwind.font_size('sm')

def title():
    with ui.row():
        ui.link('all_type','/')
        ui.link('bigger_type','/bigger')
        ui.link('bigger_type_fisrt','/bigger_first')

@ui.page('/',title='all type')
def page_index():
    title()
    icon_name = ui.select(icon_name_list, value= current_name if (current_name in icon_name_list) else icon_name_list[0] ,label='icon name:', with_input=True).classes('w-64')

    @ui.refreshable
    def show():
        all_show(icon_name=icon_name.value,icon_type=icon_name_dict[icon_name.value])
    show()
    icon_name.on_value_change(show.refresh)
    icon_name.on_value_change(lambda e:globals().update({'current_name':e.sender.value}))

@ui.page('/bigger',title='bigger type')
def page_bigger():
    title()
    icon_name = ui.select(icon_name_list, value = current_name if (current_name in icon_name_list) else icon_name_list[0],label='icon name:', with_input=True).classes('w-64')

    @ui.refreshable
    def show():
        current_type_list = icon_name_dict[icon_name.value]
        icon_type_name = ui.select({ i:type_name_map[i] for i in current_type_list}, value= current_type if(current_type in current_type_list) else current_type_list[0] , label='icon type name:',with_input=True).classes('w-64')
        icon_type_name.bind_value_to(globals(),'current_type')

        @ui.refreshable
        def inner_show():
            bigger_show(icon_name=icon_name.value,icon_type=icon_type_name.value)

        inner_show()
        icon_type_name.on_value_change(inner_show.refresh)
    show()
    icon_name.on_value_change(show.refresh)
    icon_name.on_value_change(lambda e:globals().update({'current_name':e.sender.value}))

@ui.page('/bigger_first',title='bigger_type_fisrt')
def page_bigger_first():
    title()
    icon_type_name = ui.select(type_name_map, value=current_type,label='icon type name:', with_input=True).classes('w-64')
    icon_type_name.bind_value_to(globals(),'current_type')

    @ui.refreshable
    def show():
        current_name_list = icon_name_dict_typed[icon_type_name.value]
        icon_name = ui.select(current_name_list, value= current_name if current_name in current_name_list else current_name_list[0], label='icon name:',with_input=True).classes('w-64')

        @ui.refreshable
        def inner_show():
            bigger_show(icon_name = icon_name.value, icon_type= icon_type_name.value)

        inner_show()
        icon_name.on_value_change(inner_show.refresh)
        icon_name.on_value_change(lambda e:globals().update({'current_name':e.sender.value}))
    show()
    icon_type_name.on_value_change(show.refresh)

ui.run(native=True,title='Material Icons Search')

我心飞翔1995

xiaomianao 发表于 2024-9-19 07:44
没下载啊？

审核导致链接被吞掉了
https://github.com/python-and-fiction/chinese_guide_of_nicegui_for_beginner/blob/main/src/chinese_guide_of_nicegui_for_beginner/result.txt

freckle

点不了下载啊