Material Icons 搜索器

查看 43|回复 3
作者:我心飞翔1995   
日常开发NiceGUI程序的过程中,发现icon用的
Material Icons图标字体需要访问谷歌,中国大陆没法访问,我又一直遵纪守法。
没办法,只好想办法自制一个Material Icons图标字体搜索预览工具。
代码是基于NiceGUI做的,后续NiceGUI官方会推出Icon模块,图标字体使用会方便一些,目前可以先用这个顶一顶。
[color=]首先要从
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:
        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 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')


image.png (29.62 KB, 下载次数: 0)
下载附件
2024-9-19 12:34 上传



image.png (26.56 KB, 下载次数: 0)
下载附件
2024-9-19 12:34 上传



image.png (26.5 KB, 下载次数: 0)
下载附件
2024-9-19 12:35 上传

图标, 代码

我心飞翔1995
OP
  


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   

点不了下载啊
xiaomianao   

没下载啊?
您需要登录后才可以回帖 登录 | 立即注册