{"id":17957515,"url":"https://github.com/itinance/react-native-ikon","last_synced_at":"2026-03-12T16:02:32.064Z","repository":{"id":57337582,"uuid":"76735701","full_name":"itinance/react-native-ikon","owner":"itinance","description":"simple, generic and flexible json-based icon-management","archived":false,"fork":false,"pushed_at":"2021-12-28T10:55:43.000Z","size":17,"stargazers_count":10,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T11:29:15.731Z","etag":null,"topics":["auto-scaling","icon-management","icon-set","iconset-structure","ikon-component","json","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/itinance.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}},"created_at":"2016-12-17T16:51:27.000Z","updated_at":"2023-10-21T03:48:32.000Z","dependencies_parsed_at":"2022-09-14T15:11:44.324Z","dependency_job_id":null,"html_url":"https://github.com/itinance/react-native-ikon","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Freact-native-ikon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Freact-native-ikon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Freact-native-ikon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itinance%2Freact-native-ikon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itinance","download_url":"https://codeload.github.com/itinance/react-native-ikon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245385516,"owners_count":20606664,"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":["auto-scaling","icon-management","icon-set","iconset-structure","ikon-component","json","react-native"],"created_at":"2024-10-29T10:55:27.025Z","updated_at":"2026-03-12T16:02:27.007Z","avatar_url":"https://github.com/itinance.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-ikon\nSimple, generic and flexible json-based icon-management.\n\nThis library is NOT to be confused with specific Icon-support-libraries like\n[react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).\n\nThe purpose is to support individual icons and to apply their style and size only once\nor once per Icon-group.\n\nInsead of\n```\n\u003cImage source={....} width={32} height={32} style={....}/\u003e\n```\none can use the Ikon-component and apply the styles, width and height in an\njson based object structure:\n```\n\u003cIkon name=\"themes.default.lessons\"/\u003e\n```\n\nThe render-function of `\u003cIkon\u003e` will look up an IconSet-structure to pick relevant values\nlike 'width' and 'height' by the name that was passed to the Ikon-component.\nIf these attributes are not present, it will traverse up the IconSet-structure\nunless the attribute could be found. This way, nested groups are supported and\nwill read inherited values from their parent.\n\n## ChangeLog\n\n0.1.2 -\u003e Property \"onPress\" (optional) added to provide button-functionality\n\n0.1.1 -\u003e fix for redux (if used)\n\n## Example of an iconSet:\n```javascript\nexport const iconSet = {\n  themes:\n    default:\n      autoScale: true,\n      width: 32,\n      height: 16,\n      lessons: {\n        // defaults:\n        resizeMode: 'stretch',\n        $disabled: {\n          opacity: 0.6\n        },\n        // specific icon\n        openLesson: {\n          source: require('./img/icon-open.png'),\n        },\n        // specific icon\n        closeLesson: {\n          source: require('./src/img/icon-open.png'),\n          transform:[{rotate: '180 deg'}],\n        },\n        help: {\n          source: require('./src/img/icon-help.png'),\n          height: 16 // \u003c--- different height\n        }\n      }\n    }\n  }\n}\n```\n\n## How to use:\nSomewhere in the code (e.g. the root component), just register the IconSet:\n```javascript\nimport {iconSet} from './iconSet';\nimport Ikon from 'react-native-ikon';\n\nIkon.registerIconSet(iconSet);\n```\n\nIn the render-functions:\n```javascript\n\u003cIkon name=\"lessons.openLesson\" /\u003e\n```\n\n## Special mode: \"disabled\" icons\n\nIt is also possible to specify an icon as \"disabled\":\n```javascript\n\u003cIkon name=\"lessons.openLesson\" disabled={true} /\u003e\n```\n\nIf disabled, it will look up a specific node in the iconSet with the name \"$.disabled\"\nand apply all their attributes to the `\u003cImage\u003e`-component.\nIf $disabled was not found, it will default to an opacity of 0.5.\n\n## Make it touchable with \"onPress\"\n\nIt is also possible to encapsulate this icon within a [TouchableOpacity](https://facebook.github.io/react-native/docs/touchableopacity.html) to\nmake it like a button:\n```javascript\n\u003cIkon name=\"lessons.openLesson\" onPress={this.onMyIconPressed} disable={true/false} /\u003e\n```\n\nThe optional property \"disabled\" will be passed instead to the TouchableOpacity in this case\nto provide native feeling of a disabled Touchable-component.\n\n## AutoScaling\n\nIf the attribute *autoScale* is true, the width and height will be automatically adjusted to the\nscreensize in the same way like Facebook [did it in f8app](https://github.com/fbsamples/f8app/blob/master/js/common/F8Text.js#L46).\n\n\n## Properties\n\nThe following props are supported being passed into the \u003c Icon \u003e-Tag, where they do\noverride any settings in the IconSet-Structure.\n\n- [width](https://facebook.github.io/react-native/docs/layout-props.html#width) (number)\n- [height](https://facebook.github.io/react-native/docs/layout-props.html#height) (number)\n- [resizeMode](https://facebook.github.io/react-native/docs/image.html#resizemode)\n- autoScale (boolean)\n- [style](https://facebook.github.io/react-native/docs/image.html#source)\n- [source](https://facebook.github.io/react-native/docs/image.html#source)\n- [onPress](https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#onpress) (when present, the icon is encapsulated within a TouchableOpacity passing this onPress-handler)\n\n## Contribution:\n\nContributors are welcome! Feel free to submit pull requests or open [discussions](https://github.com/itinance/react-native-ikon/issues).\n\n## Author\n\nHagen Hübel, Munich/Starnberg, Germany\n\nFullstack developer, currently massive ReactNative developer \u0026 consultant\n\n[LinkedIn](https://www.linkedin.com/in/hagenhuebel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitinance%2Freact-native-ikon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitinance%2Freact-native-ikon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitinance%2Freact-native-ikon/lists"}