Music-related logos and symbols collection in SVG.

---------------------------------------

Listen on

Project 💻

https://svg-music-logos.tiagoporto.com

Motivation 🔥

I play electric guitar, and music has been part of my life since I was a teenager. Then, I graduated in Graphic Design, and after that, I moved into front-end development.

To further develop my skills and stay up-to-date with the latest technologies, I’ve made it a point to explore new tools and innovations outside of my daily routine. By combining my passions, this was the outcome.

Status ✅

Stack 🧰

Folder structure 📂

.
├── docs //documentation
├── public // public assets
├── src
│   ├── components // Shared components
│   ├── layout // base layout component
│   ├── logos
│   │   └── [artist folder]
│   │       ├── Styles files
│   │       ├── JSON files
│   │       └── SVG files
│   ├── pages // Nuxt routes
│   └── server
│       ├── api // Nuxt endpoints
│       └── db // Nuxt database and schema
├── // config files
├── package.json
└── README.md

Architecture 🏗

APIs

APIs are provided by Nuxt.

Endpoints are defined in server/api directory.

GET /api/artists

Response

{
  artists: [
    {
      id: string,
      name: string,
      nameTemplate?: string,
      origins: string[],
      genres: string[] | null,
      link: string,
      logos: [
        {
          title: string,
          svg: string,
          inverse?: boolean,
        }
      ],
    }
  ],
  count: number,
}

GET /api/artists/{id}

Response

{
  artist: {
    id: string,
    name: string,
    nameTemplate?: string,
    origins: string[],
    genres: string[] | null,
    link: string,
    logos: [
      {
        title: string,
        svg: string,
        inverse?: boolean,
      }
    ],
  }
}

GET /api/logos

Parameters

name	type	description	example
query.genre	string	Artist genre	"Doom Metal"
query.origin	string	Artist origin	"Denmark"

Response

{
  logos: [
    {
      id: string,
      name: string,
      nameTemplate?: string,
      origins: string[],
      genres: string[] | null,
      link: string,
      logo: {
          title: string,
          svg: string,
          inverse?: boolean,
      }
    }
  ],
  count: number,
}

GET /api/genres

Response

{
  genres: string[],
  count: number,
}

GET /api/origins

Response

{
  origins: string[],
  count: number,
}

Development 🛠

Pre-requirements

• git
• nvm

Install node

nvm install

Install dependencies and run prepare scripts

npm install

Running dev server

npm run dev

Adding new logos

[TODO]

Contributing 🤝

Haven’t found the logo you were looking for?

Check how to contribute.

Donating 🤜🤛

This project is developed on my free time, any donation is welcome.

License 📄

SVG Music Logos © 2016 by Tiago Porto is licensed under CC BY-NC 4.0.