Usage

Coreicons is a completely open-source icon set crafted for web, iOS, Android, and desktop apps. Coreicons was made for CoreProject, a streaming platform.

Installation

You can install Coreicons from npm with your favorite package manager. And place the following code in your main entry file.

npm install @coreproject-moe/icons

Here is how to use it with different frameworks:

// src/App.tsx
import { defineCustomElements } from "@coreproject-moe/icons/loader";

function App(){
	defineCustomElements();
	return <></>
}

// app/layout.tsx
import { defineCustomElements } from "@coreproject-moe/icons/loader";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  defineCustomElements();

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

<!-- src/routes/layout.svelte -->
<script lang='ts'>
	import { defineCustomElements } from "@coreproject-moe/icons/loader";
	import { onMount } from 'svelte';

	onMount(()=>{
		defineCustomElements();
	})
</script>

<script type="module" src='https://cdn.jsdelivr.net/npm/@coreproject-moe/icons@latest'></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@coreproject-moe/icons@latest/dist/coreproject-icons/coreproject-icons.js"></script>

Basic Usage

To use a built-in icon from the Ionicons package, populate the name attribute on the coreproject-[shape|logo]-[icon-name] component:

<coreproject-shape-airplay></coreproject-shape-airplay>

Variants

There are some icons with variants, you can use different variants of one icon with an attr: variant like:

<coreproject-shape-align variant='justify'></coreproject-shape-align>

Properties / Attributes

You can provide width,height,_style that will be passed to the shadow svg. Here is an example:

<coreproject-shape-airplay class='text-primary' width='200' height='200' _style='color: black'></coreproject-shape-airplay>

Issue Tracker

If you see any issue with icons, feel free to raise an issue here.

Thank you!