Music-related logos and symbols collection in SVG.
---------------------------------------
Listen on
https://svg-music-logos.tiagoporto.com
I’ve been playing electric guitar since I was a teenager, and music has always been a significant part of my life. I went on to graduate with a degree in graphic design, which eventually led me to front-end development.
To continue growing my skills and stay current with the latest technologies, I actively explore new tools and innovations in my free time. The result of combining my passion for music with my professional skills is this project.
.
├── app
│ ├── components // Shared components
│ ├── layouts // Base layout components
│ ├── pages // Nuxt routes
│ └── app.vue // Nuxt root component
├── docs
├── logos
│ └── {artist} // Artist folder
│ ├── Style files
│ ├── SVG files
│ └── {artist}.json // Artist data
├── public // Public assets
├── scripts // NPM scripts
├── server
│ ├── db // Nuxt database
│ └── api // Nuxt endpoints
├── shared
│ ├── schema
│ └── utils
├── test // E2E tests
│
├── package.json
├── README.md
└── // config files
Frontend is built with Nuxt and Vue.
The root component is app/app.vue, routes are defined in app/pages directory.
Logos styles are written in SASS with SCSS syntax.
APIs are provided by Nuxt.
Endpoints are defined in server/api directory.
Response
{
artists: [
{
id: 'string',
name: 'string',
nameTemplate: 'string | undefined',
origins: 'string[]',
genres: 'string[] | undefined',
link: 'string',
logos: [
{
title: 'string',
svg: 'string',
inverse: 'boolean | undefined'
}
]
}
],
count: 'number'
}Parameters
| name | type | description | default |
|---|---|---|---|
| query.page | number | Current Page | 1 |
| query.itemsPerPage | number | Total items per page | 30 |
Response
{
artist: {
id: 'string',
name: 'string',
nameTemplate: 'string | undefined',
origins: 'string[]',
genres: 'string[] | undefined',
link: 'string',
logos: [
{
title: 'string',
svg: 'string',
inverse: 'boolean | undefined'
}
]
},
pagination: {
totalRecords: 'number',
currentPage: 'number',
totalPages: 'number'
}
}Parameters
| name | type | description | default | example |
|---|---|---|---|---|
| query.genre | string | Artist genre | "Doom Metal" | |
| query.origin | string | Artist country origin | "Denmark" | |
| query.page | number | Current Page | 1 | 2 |
| query.itemsPerPage | number | Total items per page | 30 | 90 |
Response
{
logos: [
{
id: 'string',
name: 'string',
nameTemplate: 'string | undefined',
origins: 'string[]',
genres: 'string[] | undefined',
link: 'string',
logo: {
title: 'string',
svg: 'string',
inverse: 'boolean | undefined'
}
}
],
count: 'number',
pagination: {
totalRecords: 'number',
currentPage: 'number',
totalPages: 'number'
}
}Response
{
genres: 'string[]',
count: 'number'
}Response
{
origins: 'string[]',
count: 'number'
}Artists data are located in logos/{artistId} directory.
The artist data is stored in {artistId}.json file.
All JSON files will be merged into a single file generated by Gulp and stored in shared/db/data.json.
SVG files will be processed by Gulp and stored in public/logos/{artist} directory.
If a logo has external styles.
E.g.
The SCSS file will be compiled by Gulp and next the styles will be injected in the correlated SVG before story in the public directory.
nvm installnpm installnpm run devFor adding new artists, you can use the new-artist script.
The script will create a new folder with a JSON and a SVG.
npm run new-artistFor adding new logos for a specific artist, you can use the new-logo script.
The script will add a new SVG to the artist folder and to JSON.
npm run new-logoCan’t find the logo you were looking for?
Check the guide how you can help
This project was developed in my free time. Any donations are greatly appreciated.
SVG Music Logos © 2016 by Tiago Porto is licensed under CC BY-NC 4.0.
{ "id": "zakk-sabbath", // ... "logos": [ { "title": "Zakk Sabbath", "svg": "zakk-sabbath.svg", "css": "zakk-sabbath.css" } ] }