icons-pack / svelte-simple-icons Goto Github PK

View Code? Open in Web Editor NEW

46.0 3.0 2.0 3.95 MB

📦 This package provides the Simple Icons packaged as a set of Svelte components.

License: MIT License

JavaScript 100.00%

svelte sveltejs svelte-simple-icons svg svg-icons icons components design ui ui-components

svelte-simple-icons's Introduction

svelte-simple-icons

This package provides the Simple Icons 11.5.0 packaged as a set of Svelte components.

Installation

Install the package in your project directory with:

// with yarn
yarn add @icons-pack/svelte-simple-icons

// with npm
npm add @icons-pack/svelte-simple-icons

Usage

All icons are imported from a single file, where [ICON SLUG] is replaced by a capitalized slug.

Demo

Edit codesandbox

Basic example

  <!-- Import a specific icon by its slug as: -->
  <!-- import { Si[ICON SLUG] } from 'simple-icons'; -->

  <script>
    import { SiReact, SiSvelte, SiDocker } from "@icons-pack/svelte-simple-icons";
  </script>

  <SiSvelte color="#FF3E00" size={90} />

  <SiReactJs color="#61DAFB" size={50} />

  <SiDocker />

Change title

  <!-- title default "Svelte" -->
  <script>
    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
  </script>

  <SiSvelte title="My title" />

Custom styles

  <script>
    import { SiSvelte } from "@icons-pack/svelte-simple-icons";
  </script>

  <SiSvelte class="myStyle" />

  <style>
    .myStyle {
      width: 35px;
      height: 35px;
    }
  </style>

svelte-simple-icons's People

Contributors

Stargazers

Watchers

Forkers

capesepias debuggerpk

svelte-simple-icons's Issues

Fat bundles, even if you only use one icon

I decided to use this library to add an icon to an app I am developing [0]. I really only need the Github [1] icon, but the way this is structured, I pay the cost to add all the icons. That's a bundle of about 5 MB uncompressed and ~1.1 MB compressed.

Because the components are auto sufficient, at least the GitHub one, I was able to just copy that Svelte file to the repo and remove the dependency. Now the app bundle is under 16 KB.

[0] https://base16-showcase.vercel.app/
[1] https://github.com/icons-pack/svelte-simple-icons/blob/main/src/components/Github.svelte

Optimize Compile Time

Normally, we only utilize a small subset of icons within the project. However, including just a single icon significantly increases compile time by several minutes. This can be optimized!

I've submitted a pull request #80 that drastically reduces compile times while maintaining single icon inclusion. Please consider reviewing the PR.

Thanks.

Unable to use with Sapper

When attempting to use with Sapper, the following error is generated:

<Facebook> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Sapper requires the original component source in order to build for server-side rendering.
See here: https://github.com/sveltejs/sapper-template#using-external-components

The current build structure for this package does not allow accessing the original component source. E.g. it does not work if installed as a dependency nor devDependency.

You may want to support Sapper-friendly exports to the uncompiled icon .svelte files within the package.

Error: 'Svelte' is not exported by https://unpkg.com/@icons-pack/[email protected]/build/index.js, imported by ./App.svelte

Here is the demo.

It doesn't work locally either.
Have you added index.js to export all icons?

And this is what I got localhost:

<Svelte> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Type Definitions?

This Package should have type definitions.

Update Simple Icons Version

From the next major release of simple-icons (v11, releasing on May 26, 2024), We will begin removing third-party extensions from our README list that are not up to date with at least the previous major release.
For example, when v11 is released, we will remove any extensions that don't support v10.0.0 or higher.

How do I keep my package up to date?

There are two methods that prove most popular among other maintainers. It is up to you which you implement.

Using `@latest` from a CDN

Projects that use the CDN version of the project (jsDelivr/unpkg) can keep up to date simply by changing the version number in their code to @latest. That way - you're always using the most up to date version of the icon package.

Running a weekly CRON

Many of our third party contributors make use of GitHub actions, and a weekly CRON job to query that the version number of the main package has changed, and then update and build their own package. A great example of this is the DrawIO package by mondeja. The main package is released consistently on a Sunday - so we recommend running your CRON job on a Monday or Tuesday.

When you've got your extension running one of the above methods, drop us a Pull Request to update your version number on the README.

If you're in need of any support in implementing one of the above - please feel free to start a discussion or ask us on Discord.