2954: Add svg documentation and update documentation

README.md

@@ -22,24 +22,16 @@ React JS and React Native App for [Integreat](https://integreat-app.de), [Malte]
 
 ## Contributing
 
+First, make sure you have a look at our [conventions](docs/conventions.md).
+
 You can contribute by:
 
+- [Reporting bugs](docs/contributing.md#reporting-issues-and-bugs)
 - [Creating Pull requests](docs/contributing.md#pull-requests)
-- [Reporting bugs](docs/contributing.md#bug-reporting)
 
 If you want to know more about Integreat or if you want to join us, contact [Leandra](mailto:[email protected]),
 [Steffen](mailto:[email protected]) or [our info mail](mailto:[email protected]) and visit our [website](https://integreat-app.de).
 
-We use this emoji code for reviewing:
-
-- :+1: or `:+1:` This is great! It always feels good when somebody likes your work. Show them!
-- :question: or `:question:` I have a question / can you clarify?
-- :x: or `:x:` This has to change. It’s possibly an error or strongly violates existing conventions.
-- :wrench: or `:wrench:` This is a well-meant suggestion. Take it or leave it.
-- :upside_down_face: or `:upside_down_face:` This is a nitpick. Normally related to a small formatting or stylizing detail that shouldn’t block moving forward.
-- :thought_balloon: or `:thought_balloon:` I’m just thinking out loud here. Something doesn’t necessarily have to change, but I want to make sure to share my thoughts.
-- :clown_face: or `:clown_face:` This is a complaint about something with no obvious answer, not necessarily a problem originating from changes.
-
 ## Project Structure
 
 This is a monorepo and contains the following projects:

assets/README.md

@@ -0,0 +1,29 @@
+# Assets
+
+All build-config and platform independent assets should be placed in this directory.
+All assets should use kebab-case naming.
+
+## Icons
+
+### Conventions
+
+Icons should be added to the corresponding [icons](icons) subfolder.
+Normal icons are supposed to follow the following conventions:
+
+- Use the SVG format
+- Resize to 24x24px with width and height set
+- The viewbox starts at (0, 0)
+- Set the general icon color to `currentColor` (using `fill="currentColor"`)
+- The SVG should be as simple and reduced as possible
+
+If the icon has e.g. a build-config dependent background, you can use `fill="var(--theme-color, none)"`.
+
+### Usage
+
+To use icons (and other assets) in the code, add them to the corresponding assets files
+for [web](../web/src/assets/index.ts) and/or [native](../native/src/assets/index.ts).
+You can then simply use our custom `Icon`
+components ([web](../web/src/components/base/Icon.tsx), [native](../native/src/components/base/Icon.tsx)).
+They automatically set the default color, theme color and size and provide additional convenience props
+(e.g. `directionDependent`, `reverse`).
+If necessary, you can simply override styles using styled-components.

docs/contributing.md

@@ -5,7 +5,17 @@ by [reporting a bug](#reporting-issues-and-bugs), [opening a pull request](#pull
 or [contacting us](#contact-us) if you don't know where to start. Please make sure to have a look at
 our [conventions](conventions.md).
 
-## Contact us
+Before contributing, please make sure to have a look at our [conventions](conventions.md).
+
+## Contents
+
+- [Contact](#contact-us)
+- [Reporting Issues and Bugs](#reporting-issues-and-bugs)
+- [Pull Requests](#pull-requests)
+- [Release Notes](#release-notes)
+- [Reviews](#reviews)
+
+## Contact Us
 
 If you don't know where to start or if you want to know more about Integreat,
 contact [Leandra](mailto:[email protected]),
@@ -23,7 +33,7 @@ our [project views](https://github.com/orgs/digitalfabrik/projects/2/views/1).
 
 If you open a new issue, please make sure to follow the templates and create meaningful issues and bugs.
 
-## Pull requests
+## Pull Requests
 
 Before starting to write code and opening a pull request, please take a look [at our conventions](conventions.md).
 
@@ -58,3 +68,15 @@ The release notes can be found [here](../release-notes) and are automatically mo
 release.
 They are also shown in the stores and
 the [release section of github](https://github.com/digitalfabrik/integreat-app/releases).
+
+### Reviews
+
+We use the following emoji code for reviewing:
+
+- :+1: or `:+1:` This is great! It always feels good when somebody likes your work. Show them!
+- :question: or `:question:` I have a question / can you clarify?
+- :x: or `:x:` This has to change. It’s possibly an error or strongly violates existing conventions.
+- :wrench: or `:wrench:` This is a well-meant suggestion. Take it or leave it.
+- :upside_down_face: or `:upside_down_face:` This is a nitpick. Normally related to a small formatting or stylizing detail that shouldn’t block moving forward.
+- :thought_balloon: or `:thought_balloon:` I’m just thinking out loud here. Something doesn’t necessarily have to change, but I want to make sure to share my thoughts.
+- :clown_face: or `:clown_face:` This is a complaint about something with no obvious answer, not necessarily a problem originating from changes.

docs/conventions.md

@@ -6,8 +6,10 @@
 - [Testing](#testing)
 - [Code Quality](#code-quality)
 - [Commit Messages and Pull Requests](#commit-messages-and-pull-request)
+- [Reviews](#reviews)
 - [Versioning](#versioning)
 - [Folder Structure](#folder-structure)
+- [Assets and Icons](#assets-and-icons)
 
 ## Naming
 
@@ -89,6 +91,10 @@ write good commit messages. Commit messages should have the following schema:
 
 The same applies for PR names.
 
+## Reviews
+
+We use an [emoji code](contributing.md#reviews) for reviewing.
+
 ## Versioning
 
 Versions consist of a version name and a version code.
@@ -135,3 +141,8 @@ src
     │   LanguageDetector.ts
     |   indext.ts
 ```
+
+## Assets and Icons
+
+We place our build-config and platform independent assets and icons in the [assets](../assets) in the root directory.
+See more information in the corresponding [README](../assets/README.md).