A tiny icon API built with Nuxt

Iconic

A simple icon API

Icons  ·  API

About The Project

Working with icons can be a whole thing. You have to find the right icon, download it, and then use it in your project. This is a pain. We want to make it easier for you to use icons in your projects. Iconic aims to make this process easier by providing a simple API to fetch SVGs and render them in your project.

Built With

• Nuxt
• TailwindCSS
• DaisyUI

Usage

• You can use the API to fetch icons. The API is available at iconicui.vercel.app/api/icons. The API returns the following JSON:

{
  "name": "icon_name",
  "tags": ["tag1", "tag2", "tag3"],
  "data": "<svg>...</svg>"
}

Example Component (Nuxt)

<script setup>
const props = defineProps({
  name: {
    type: String,
    default: "",
    requred: true,
  },
  color: {
    type: String,
    default: "",
  },
});

const { data: svg } = api.get(
  `http://iconicui.vercel.app/api/icons/${props.name}`
);
</script>

<template>
  <div
    v-html="svg"
    :style="`${props.color ? `color: ${props.color}` : ''}`"
  ></div>
</template>

GitHub

View Github