22 Shout-Outs to Open Source and Infinite Creativity
Tags: opensource, vue, react, angular
Published: 2020-02-19 14:52:04

Sorry if this is a bit emotional, but I just have to say this now. Even at the risk of boring some of you. This isn't another Vue vs React vs Angular post—it's more like the opposite.

I love the open source community. I really do. It's simply amazing what people are capable of to make things easier to use, make things more performant, build things to connect and find solutions for complex problems — in short: make the life of other developers and users easier and help each other out — even without being paid (in many cases)! I don't know another professional area where this is the case to this extent.

Sometimes when [exploring Github repositories](https://github.com/explore), I'm especially impressed by how creative people are when it comes to create a logo for their extension of an existing framework. So I thought it would be nice to just showcase some totally random projects to see how colorful and creative Open Source is! And maybe there are some you haven't heard about yet and are useful for your current project.

But even if not, let's take this as inspiration and motivation for our own Open Source contributions and projects in 2020!

## Vue.js

Let's start with some Vue.js projects I found on Github. Here is the original logo: 

<img src="https://vuejs.org/images/logo.png" alt="Vue.js logo" width="300"/>

### 1. vee-validate

This framework allows you to validate inputs and display errors. How efficiently simple the Vue.js logo was changed here to represent validation ✅!

<img src="https://logaretm.github.io/vee-validate/logo.svg" alt="vee validate logo" width="300"/>
{% github logaretm/vee-validate no-readme %}

---

### 2. Awesome Vue.js

A very very long list of projects related to Vue.js. And of course, what doesn't look awesome with sunglasses 😎!

<img src="https://raw.githubusercontent.com/vuejs/awesome-vue/master/logo.svg" alt="awesome vue logo" width="400"/>
{% github vuejs/awesome-vue no-readme %}

---

### 3. BootstrapVue

An implementation of the Bootstrap v4 component and grid system for Vue.js.

<img src="https://raw.githubusercontent.com/bootstrap-vue/bootstrap-vue/dev/static/logo.svg" alt="BootstrapVue logo" width="250" />
{% github bootstrap-vue/bootstrap-vue no-readme %}

---

### 4. Vuefire & Vuexfire

A really handy package for those using Firebase/Firestore with Vue.js. I like how the Vue.js logo becomes a stylised torch 🔥!

<img src="https://vuefire.vuejs.org/vuefire-logo.svg" alt="Vuefire logo" width="270" />
{% github vuejs/vuefire no-readme %}

---

### 5. Vue Styleguidist

A Vue.js development environment with a living style guide. Nice tie 👔!

<img src="https://raw.githubusercontent.com/vue-styleguidist/vue-styleguidist/dev/assets/logo.svg" alt="Vue Styleguidist logo" width="270" />
{% github vue-styleguidist/vue-styleguidist no-readme %}

---

### 6. vuesion

Build production-ready PWAs with this Vue.js boilerplate. Not much left of the Vue.js logo 🕶!

<img src="https://github.com/vuesion/vuesion/raw/master/src/static/logo.png" alt="vuesion logo" width="270" />
{% github vuesion/vuesion no-readme %}

---

### 7. electron-vue

Build electron applications with this Vue.js boilderplate. You don't always have to modify the Vue.js logo, sometimes using the Vue.js colors is enough ⚛!

<img src="https://github.com/SimulatedGREG/electron-vue/raw/master/docs/images/logo.png" alt="electron-vue logo" width="450" />
{% github SimulatedGREG/electron-vue no-readme %}

---

### 8. Vuesax

A component framework based on Vue.js. Color gradients ftw 🎨!

<img src="https://raw.githubusercontent.com/lusaxweb/vuesax/master/public/vuesax-logo.png" alt="Vuesax logo" width="450" />
{% github lusaxweb/vuesax no-readme %}

---

### 9. VueUse

And some utilities of the Vue Composition API. Need a logo for your Vue.js project? Just change the letter 😅!

<img src="https://raw.githubusercontent.com/antfu/vueuse/master/resources/logo-vertical.png" alt="VueUse logo" width="450" />
{% github antfu/vueuse no-readme %}

---

## React.js

Now let's see some examples from the React.js community. Here is the original logo:

<img src="https://chloerei.com/rails-frontend/images/reactjs-logo.png" alt="React.js logo" width="300"/>

### 10. Redux

A popular predictable state container for JavaScript apps that can be used together with React (but also with any other view library).

<img src="https://raw.githubusercontent.com/reduxjs/redux/master/logo/logo.svg" alt="Redux logo" width="350" />
{% github reduxjs/redux no-readme %}

---
<!--
### 11. REAVIZ

A modular chart component library.

<img src="https://raw.githubusercontent.com/jask-oss/reaviz/master/docs/assets/logo.svg" alt="REAVIZ logo" width="350" />
{% github jask-oss/reaviz no-readme %}

--- -->

### 11. React-Leaflet

Some React components for Leaflet maps. A logo showing React on a leaf 🍃 ... or is it a map marker?

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ifclz6r8ag8s20gxeqmi.png" alt="React-Leaflet logo" width="300" />
{% github PaulLeCam/react-leaflet no-readme %}

---

### 12. React SVG morph

A library to morph SVG components one into another. Here an example showing the authors love for React ♥!

<img src="https://raw.githubusercontent.com/gorangajic/react-svg-morph/master/example.gif" alt="React SVG morph logo" width="300" />
{% github gorangajic/react-svg-morph no-readme %}

---

### 13. React Cosmos

A development environment for building scalable, high-quality user interfaces. Not exactly the React logo, but both logos show some kind of cosm 🚀! Don't they?

<img src="https://raw.githubusercontent.com/react-cosmos/react-cosmos/master/website/static/cosmonaut128.png" alt="React Cosmos logo" width="128" />
{% github react-cosmos/react-cosmos no-readme %}

---

### 14. Reactotron

An app for inspecting React JS and React Native apps. Hello again color gradients 😅!

<img src="https://raw.githubusercontent.com/infinitered/reactotron/master/docs/images/readme/Reactotron-128.png" alt="Reactotron logo" width="128" />
{% github infinitered/reactotron no-readme %}

---

### 15. React Styleguidist

As we've already seen for Vue.js, here is the React version of the Styleguidist with a completely different logo... 🐙!

<img src="https://dev-to-uploads.s3.amazonaws.com/i/c88x79o3o80ptiwlxy5z.png" alt="React Styleguidist logo" width="300" />
{% github styleguidist/react-styleguidist no-readme %}

---

## Angular

At last let's see what's out there for Angular. Here is the original logo:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/zst75eviwu3pcvmibjaq.png" alt="Angular logo" width="300"/>

### 16. NG Bootstrap

Bootstrap 4 Angular widgets. The original logo in layers and with another letter 🛡!

<img src="https://ng-bootstrap.github.io/img/logo-stack.png" alt="NG Bootstrap logo" width="350" />
{% github ng-bootstrap/ng-bootstrap no-readme %}

---

### 17. Awesome Angular

As we've already seen for Vue.js: Here is an awesome version of Angular. Why not simply reusing the original logo 💡!?

<img src="https://raw.githubusercontent.com/PatrickJS/awesome-angular/gh-pages/media/awesome-angular.png" alt="Awesome Angular logo" width="450" />
{% github PatrickJS/awesome-angular no-readme %}

---

### 18. ngx-materialize

Another Angular wrap around the Materialize library. The Angular logo materialized!

<img src="https://raw.githubusercontent.com/sherweb/ngx-materialize/master/demo/src/assets/ngx-materialize-circle.png" alt="ngx-materialize logo" width="200" />
{% github sherweb/ngx-materialize no-readme %}

---

### 19. NG-ZORRO

A combination of Ant Design and Angular which is also visible in a unified logo 🤝🏻!

<img src="https://dev-to-uploads.s3.amazonaws.com/i/hssomy65nu0apnq1rtxl.png" alt="NG-ZORRO logo" width="300" />
{% github NG-ZORRO/ng-zorro-antd no-readme %}

---

### 20. Angular-Cesium

A project using Cesium and Angular components to create mapping applications. A world map, a name, the Angular logo - that's all it takes 🗺!

<img src="https://angular-cesium.com/assets/angular_cesium3.png" alt="Angular-Cesium logo" width="300" />
{% github articodeltd/angular-cesium no-readme %}

---

### 21. Angular Progressbar

A nanoscopic progress bar that tries to convince users that something is happening. Angular logo loading in progress ⏳!

<img src="https://dev-to-uploads.s3.amazonaws.com/i/84kem3xnzzv1r91u0e9f.png" alt="Angular Progressbar logo" width="300" />
{% github MurhafSousli/ngx-progressbar no-readme %}

---

### 22. ngx-auth-firebaseui

Angular UI component for firebase authentication. Put something inside the famous Angular outline and it will be recognized as Angular project 🔥!

<img src="https://raw.githubusercontent.com/AnthonyNahas/ngx-auth-firebaseui/master/assets/angular-material-extensions-logo.png" alt="ngx-auth-firebaseui logo" width="300" />
{% github AnthonyNahas/ngx-auth-firebaseui no-readme %}

---

## Wrap it up

I hope I was able to show some of the creativity in Open Source and you are now motivated to fork something or create your own. This list could be continued forever. There are countless great OS projects out there.

A big big thanks again for everyone who contributes to OS - doesn't matter how much or how little! It's so good to have you.

If you want to feature a great OS project or one of your own, feel free to do so in the comments.

---

*Published: 19th February 2020*