{"id":21124496,"url":"https://github.com/zauberware/react-svg-assets","last_synced_at":"2025-07-08T22:30:54.164Z","repository":{"id":57170317,"uuid":"154870132","full_name":"zauberware/react-svg-assets","owner":"zauberware","description":"A simple SVG asset manager for React.","archived":false,"fork":false,"pushed_at":"2019-02-04T21:35:50.000Z","size":729,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-03T03:38:33.129Z","etag":null,"topics":["icons","react","react-components","reactjs","styled-components","svg","svg-icons"],"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/zauberware.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":"2018-10-26T17:27:17.000Z","updated_at":"2019-02-19T10:25:58.000Z","dependencies_parsed_at":"2022-08-27T13:11:45.955Z","dependency_job_id":null,"html_url":"https://github.com/zauberware/react-svg-assets","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-svg-assets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-svg-assets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-svg-assets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zauberware%2Freact-svg-assets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zauberware","download_url":"https://codeload.github.com/zauberware/react-svg-assets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225465299,"owners_count":17478522,"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":["icons","react","react-components","reactjs","styled-components","svg","svg-icons"],"created_at":"2024-11-20T04:16:44.826Z","updated_at":"2024-11-20T04:16:45.329Z","avatar_url":"https://github.com/zauberware.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Official SVG logo](svg-logo.png)\n# react-svg-assets\nA simple SVG asset provider for React (^16.3.0) .. or better (^16.6.0).\n\n## Getting Started\n\n### Why?\nAt our company we always start with \"Why?\", so why should this component be used?\nThe problem we faced was that every display component we created, that contained icons in any way, had many, many imports relative to our assests. Sometimes we have apps and sites with a lot of icons in menus or as bulletpoints a.s.o.\n\nTo keep your asset management in order, we created a higher-order component with context and the possibility to defined an iconset. This allows you to wrap your component with our Icon provider and you can easily use your icons wherever you need them, just by name.\n\n### Prequisites\nThis module depends on the **Context API** as introduced in React 16.3.0. You can read more about the Context API in the [official documentation](https://reactjs.org/docs/context.html).\n\n### Installation\n```\nnpm install @zauberware/react-svg-assets\n```\n\n### Usage\nThis package does not contain an predefined icon set, so your SVGs must be defined before using the Provider.\nThe icon set shall be function which returns a complete set or a single icon by name, this approach is giving us a higher flexibility when we try to display conditional or dynamic icons.\n\nYou can also use the withIcons HOC (Higher-Order-Component), if you need your icons outside the IconProvider or if you don't use the Provider pattern.\n\nFor testing purposes and for the example project you can import a minimal IconFile and use the 'default' identifier as the Icon property.\n\n```javascript\n# pseudo\nimport { IconProvider, icons } from '@zauberware/react-svg-assets';\n\n\u003cIconProvider icons={icons}\u003e\n  \u003cIcon icon={'default'} /\u003e\n\u003c/IconProvider\u003e\n```\n\nFor more conveniece 'styled-compenets' are included. You can override the theme values and inject your custom theme via props. Common use cases like 'rotate' or different sizes, can also be controlled via props.\n\nmain.js\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { IconProvider } from '@zauberware/react-svg-assets';\nimport './index.css';\nimport App from './App';\nimport myIcons from './myIcons'\n\nReactDOM.render(\n  \u003cIconProvider icons={myIcons}\u003e\n    \u003cApp /\u003e\n  \u003c/IconProvider\u003e\n  , document.getElementById('root'));\n```\n\nmyIcons.js\n```javascript\nimport MyIcon from './path-to-my-assets/icon.svg'\n\nexport default (_icon) =\u003e {\n  const icons = {\n    'myIconName': MyIcon,\n  }\n  return _icon ? icons[_icon] : icons\n}\n\n```\n\nApp.js\n```javascript\nimport React, { Component } from 'react';\nimport { Icon } from '@zauberware/react-svg-assets'\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cmain\u003e\n        \u003cIcon icon=\"myIconName\" /\u003e\n      \u003c/main\u003e\n    );\n  }\n}\n\nexport default App;\n\n```\n\n\n### Basic Styles \u0026 theme\n\nAdd to your theme file.\n\ntheme.js\n```javascript\nconst theme = {\n\n  icons: {\n    display: 'flex',\n    sizes: ['14px', '18px', '24px', '32px']  \n  }\n}\n\nexport default theme\n```\n\n\n\n#### Icon properties\n```javascript\n  // rotate by degrees\n  \u003cIcon icon=\"default\" rotate=\"90\" /\u003e\n\n  // add padding\n  \u003cIcon icon=\"default\" padding=\"5px\" /\u003e\n  \n  // change cursor to pointer\n  \u003cIcon icon=\"default\" clickable /\u003e\n\n  // default size is 18px; mini: 14px, medium: 24px, large: 32px\n  \u003cIcon icon=\"default\" mini|medium|large /\u003e\n\n  // render size level from theme props\n  \u003cIcon icon=\"default\" size={2} /\u003e\n\n  // render fixed width or height for viewport of icon\n  \u003cIcon icon=\"default\" width='100px' height='180px' /\u003e\n```\n\nHave a look at our example project under `/examples`.\n\n### Todos\n* Testing\n\n\n### Default Icon\nThe default icon 'letter z' is designed by Freepik from www.flaticon.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Freact-svg-assets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzauberware%2Freact-svg-assets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzauberware%2Freact-svg-assets/lists"}