{"id":15107565,"url":"https://github.com/opensmock/iconography","last_synced_at":"2025-10-23T02:31:11.801Z","repository":{"id":164036215,"uuid":"619869199","full_name":"OpenSmock/Iconography","owner":"OpenSmock","description":"Use icons libraries (Material Design, Ant Design) in your project : Import, manage, get and store.","archived":false,"fork":false,"pushed_at":"2024-07-12T11:32:04.000Z","size":95,"stargazers_count":6,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-09T13:20:15.525Z","etag":null,"topics":["ant-design","ant-design-icons","graphic","graphics","icon","icons","image","images","library","material-design","material-design-icons","opensmock","pharo","smalltalk","smock"],"latest_commit_sha":null,"homepage":"","language":"Smalltalk","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpenSmock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-27T15:17:47.000Z","updated_at":"2024-07-12T11:32:04.000Z","dependencies_parsed_at":"2024-07-12T12:22:28.627Z","dependency_job_id":null,"html_url":"https://github.com/OpenSmock/Iconography","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenSmock%2FIconography","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenSmock%2FIconography/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenSmock%2FIconography/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenSmock%2FIconography/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpenSmock","download_url":"https://codeload.github.com/OpenSmock/Iconography/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219868427,"owners_count":16555761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","ant-design-icons","graphic","graphics","icon","icons","image","images","library","material-design","material-design-icons","opensmock","pharo","smalltalk","smock"],"created_at":"2024-09-25T21:25:31.631Z","updated_at":"2025-10-23T02:31:11.795Z","avatar_url":"https://github.com/OpenSmock.png","language":"Smalltalk","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Pharo 11](https://img.shields.io/badge/Pharo-11-%23aac9ff.svg)](https://pharo.org/download)\n[![Pharo 12](https://img.shields.io/badge/Pharo-12-%23aac9ff.svg)](https://pharo.org/download)\n[![Pharo 13](https://img.shields.io/badge/Pharo-13-%23aac9ff.svg)](https://pharo.org/download)\n\n[![License](https://img.shields.io/github/license/OpenSmock/Iconography.svg)](./LICENSE)\n[![Unit tests](https://github.com/OpenSmock/Iconography/actions/workflows/CI.yml/badge.svg)](https://github.com/OpenSmock/Iconography/actions/workflows/CI.yml)\n\n# Iconography\n\n![image](https://github.com/OpenSmock/Iconography/assets/49183340/836be8c3-6b11-4b49-90ac-d9a122cdbcab)\n\nImport, manage, get and store/cache icons into Pharo from standard icon libraries.\n\nThis project provides support of icon libraries (Material Design icons, Ant Design icons, Awesome Font icons, etc.). These libraries provide multiple icons `themes` and `styles`, with a lot of icons (more than thousands) and with multiple sizes and colorization for each one. This project has the objective of easily offering management of icons and provides a simple way to use them. The other objective is to provide a cache mechanism to get and cash only required Icons and not load every one of them every time. \n\nCurrently supported libraries : \n- Material Design Icons 4.0.0 - [https://github.com/google/material-design-icons](https://github.com/google/material-design-icons)\n- Ant Design Icons - [https://github.com/ant-design/ant-design-icons](https://github.com/ant-design/ant-design-icons)\n\nThis project embeds a `SmockIconsLibrary` used by us to store our project icons, if you have your own icons you can implement your own library class.\n\nThis project can be used to easily generate some icon sets for your project (see export/serialize section).\n\nThis project wraps `ThemeIcons` to provide common icon libraries. Each asked icon is on-the-fly downloaded from library files and cached into the system to have instant access.\n\n![image](https://user-images.githubusercontent.com/49183340/229850382-7ec18735-7b97-42e8-bad6-83f0ce69d876.png)\n\n## Getting Started\n\n### Installation\n\nTo install Iconography on your Pharo image you can just execute the following script:\n\n```smalltalk\nMetacello new\n   baseline: 'OpenSmockIconography';\n   repository: 'github://OpenSmock/Iconography:main';\n   load.\n```\n\n## How to use\n\nEach library provides sets of icons in different styles, sizes, formats and customization capacities.\nDefault returned style depends of the target library, see documentation about each library below.\nThe name of each icon depends of the target library, see each link below to explore the library catalogue.\n\n### Get an icon as a Form (raster image)\n\nTo get an icon with the default style (from Object method) : \n\n```smalltalk\n\"Material Design icon\"\nform := self materialIconNamed: #check_circle.\n\n\"Ant Design icon\"\nform := self antIconNamed: #checkCircle.\n```\n\nTo get an icon with a specific style : \n\n```smalltalk\n\"Material Design icon\"\nform := self materialSharpIconNamed: #check_circle.\n\n\"Ant Design icon\"\nform := self antOutlinedIconNamed: #checkCircle.\n```\n\n### Export / Serialize icons\n\nTo serialize icons into your project classes :\n\n```smalltalk\niconDescription := AntDesignIconsLibrary new name: #checkCircle.\niconDescription serializeAsForm: MyProjectClass maxWidth: 32 maxHeight: 32.\n```\n\nThe icon is stored in `MyProjectClass` as a class method, the name of the generated method is returned by `SmockAbstractIconsLibrary\u003e\u003eserializeAsForm:maxWidth:maxHeight:`.\n\n### Material Design Icons library\n\n![image](https://github.com/OpenSmock/Iconography/assets/49183340/bb69178c-6082-4068-92b5-bfcc8d4a5807)\n\nExplore available icons here : [https://fonts.google.com/icons?icon.set=Material+Icons](https://fonts.google.com/icons?icon.set=Material+Icons)\n\nDownload icons package here : [https://github.com/google/material-design-icons/releases/tag/4.0.0](https://github.com/google/material-design-icons/releases/tag/4.0.0)\n\nUnzip the archive in your computer : \n\n![image](https://user-images.githubusercontent.com/49183340/229849591-2ca48e2e-d816-49dc-abf2-d32be1d856db.png)\n\nSet up the directory with the unzipped directory with the dedicated settings section : \n\n![image](https://user-images.githubusercontent.com/49183340/229849889-d8a3946a-070c-4fa2-b423-f49a63e8a9cd.png)\n\nThere are three different ways to get an icon :\n\n```smalltalk\n\"from object method\"\nself materialIconNamed: #check.\n\n\"from class access method\"\nMaterialDesignIconsLibrary name: #check.\n\n\"from direct class version access method, in case of multiple supported versions, here this is 4th version of the library\"\nMaterialDesignIcons4Library name: #check.\n```\n\n#### Choose a style\n\nMaterial Design 4 provides 5 icon styles : Filled (by default), Outlined, Rounded, Sharp and TwoTone.\n\nThese styles are enumerated in `MaterialDesignIconsStyle`.\n\n![image](https://user-images.githubusercontent.com/49183340/230070325-8eb61ff7-7037-449f-95df-b62bd82200f5.png)\n\nTo use it :\n\n```smalltalk\n\"3 ways to get a Form from Object method for each style\"\nform := self materialFilledIconNamed: #check_circle. \"returned by default\"\nform := self materialIconNamed: #check_circle style: #filled. \"returned by default\"\nform := self materialIconNamed: #check_circle style: MaterialDesignIconsStyle filled. \"returned by default\"\n\nform := self materialOutlinedIconNamed: #check_circle.\nform := self materialIconNamed: #check_circle style: #outlined.\nform := self materialIconNamed: #check_circle style: MaterialDesignIconsStyle outlined.\n\nform := self materialRoundedIconNamed: #check_circle.\nform := self materialIconNamed: #check_circle style: #rounded.\nform := self materialIconNamed: #check_circle style: MaterialDesignIconsStyle rounded.\n\nform := self materialSharpIconNamed: #check_circle.\nform := self materialIconNamed: #check_circle style: #sharp.\nform := self materialIconNamed: #check_circle style: MaterialDesignIconsStyle sharp.\n\nform := self materialTwoToneIconNamed: #check_circle.\nform := self materialIconNamed: #check_circle style: #twoTone.\nform := self materialIconNamed: #check_circle style: MaterialDesignIconsStyle twoTone.\n```\n\n### Ant Design Icons library\n\n![image](https://github.com/OpenSmock/Iconography/assets/49183340/fab7aafa-dca3-4766-ac2a-25ba21707d48)\n\nExplore available icons here : [https://ant.design/components/icon](https://ant.design/components/icon)\n\nDownload the code of the official github project as a ZIP (it contains the icons package) here : [https://github.com/ant-design/ant-design-icons](https://github.com/ant-design/ant-design-icons)\n\nUnzip the archive on your computer.\n\nSet up the directory with the unzipped directory with the dedicated settings section.\n\nThere are three different ways to get an icon :\n\n```smalltalk\n\"from object method\"\nself antIconNamed: #checkCircle.\n\n\"from class access method\"\nAntDesignIconsLibrary name: #checkCircle.\n```\n\n#### Choose a style\n\nAnt Design provides 3 icon styles : Filled (by default), Outlined and TwoTone.\n\nThese styles are enumerated in `AntDesignIconsStyle`.\n\nTo use it :\n\n```smalltalk\n\"3 ways to get a Form from Object method for each style\"\nform := self antFilledIconNamed: #checkCircle. \"returned by default\"\nform := self antIconNamed: #checkCircle style: #filled. \"returned by default\"\nform := self antIconNamed: #checkCircle style: AntDesignIconsStyle filled. \"returned by default\"\n\nform := self antOutlinedIconNamed: #checkCircle. \"returned by default\"\nform := self antIconNamed: #checkCircle style: #outlined. \"returned by default\"\nform := self antIconNamed: #checkCircle style: AntDesignIconsStyle outlined.\n\nform := self antTwoToneIconNamed: #checkCircle. \"returned by default\"\nform := self antIconNamed: #checkCircle style: #twoTone. \"returned by default\"\nform := self antIconNamed: #checkCircle style: AntDesignIconsStyle twoTone.\n```\n\n## Dependencies\n\n- [Athens-SVG](https://github.com/pharo-contributions/Athens-SVG)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensmock%2Ficonography","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopensmock%2Ficonography","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopensmock%2Ficonography/lists"}