Icons Visualizer

A quick and simple UI and API to search and display icons. Can be used in an offline environment thanks to Docker. Database-free.

Written in Python (Flask RESTPlus / Swagger) and ReactJS.

Get started

Import the icons you want in the icons/ directory.

ℹ️ The name of your files are very important : the search engine is based on filenames to find search keywords.

Build for dev

docker-compose up -d

You can access the UI at localhost:8080

Build for prod

docker-compose -f prod.docker-compose.yml up --build -d

You can access the UI at localhost:8080

Deploy to K8S

I pretend you have here your K8S instance configured to be accessed by your kubectl CLI.

I've used Scaleway Kapsule to perform my tests. This is an easy way to have a Kubernetes cluster quickly ready.

1. Building production images (optional)

   Images are tagged flavienb/icons-visualizer-{api,web,nginx}:latest by default. Edit it in prod.docker-compose.yml before building.

   ℹ️ You might be interested in pushing your images in a private registry (e.g: Scaleway's Container Registry service).

   docker-compose -f prod.docker-compose.yml build

   Finally, docker push the 3 images and edit K8S' configurations :

   • k8s/web.yaml, line 26
   • k8s/api.yaml, line 21
   • k8s/nginx.yaml, line 21

2. Add a new icons-visualizer namespace

   kubectl create namespace icons-visualizer

3. Considerations on persistant volume for icons

   You have 4 options to see your icons on Kubernetes :

   • Create a PersistentVolume with spec.local pointing to a path on a node and import your icons inside (requires an SSH access to this node)
   • Use a remote NFS server
   • Copy all of your icons in your Docker image
   • Use a S3 server such as MinIO and import your pictures via a web interface

   For this example, I'll go with MinIO so you have a light image to deploy.

4. Configure your Ingress app endpoint

   • Define the app and MinIO endpoints in k8s/ingress.yaml, line 10 and 20
   • Check the env variables in k8s/env-configmap.yaml
   • Check the PersistentVolumeClaim if you're not using Scaleway, in k8s/minio-pvc.yaml

   Deploy with :

   kubectl apply -f ./k8s --namespace icons-visualizer

5. Add icons

   Connect to the MinIO interface and add your icons in the icons bucket.

   Start a new search in the Icons Visualizer UI and enjoy !

   ℹ️ The API will look up for new icons in S3 and file-system every minute.