Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

media-icons

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

media-icons

Open-source and beautifully hand-crafted collection of media icons.

  • 0.10.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.3K
decreased by-14.16%
Maintainers
1
Weekly downloads
 
Created
Source

Media Icons

package-badge discord-badge

Media Icons is an open-source and beautifully hand-crafted collection of icons, designed by the Vidstack team specifically for building audio and video players. Our icons are bold, clean, and consistent. All of the icons are free for both personal and commercial use.

Media Icons Overview

Usage

Media Icons can be used in any of the following ways:

Catalog

The easiest way to get started is by heading over to the media icons catalog on the Vidstack website, searching for an icon, copying the raw SVG, and finally pasting it in your project.

Bundle

We recommend using unplugin-icons as it has many bundler (Vite/Rollup/Webpack), framework (React/Vue/Preact/Solid/Svelte) and customization options.

First, install the package:

npm i media-icons

Next, you'll need to configure the plugin like so:

import { FileSystemIconLoader } from "unplugin-icons/loaders";

Icons({
  customCollections: {
    media: FileSystemIconLoader("./node_modules/media-icons/raw"),
  },
});

Finally, you can import the icons like so:

// Replace {name} with the icon name.
import ... from '~icons/media/{name}';
// Examples
import PauseIcon from '~icons/media/pause';
import PlayIcon from '~icons/media/play';

The complete list of icons can be found in our media icons catalog.

SVG

The raw SVG files can be imported from this package like so:

// Replace {name} with the icon name.
import ... from 'media-icons/raw/{name}.svg';
// Examples
import PauseIcon from 'media-icons/raw/pause.svg';
import PlayIcon from 'media-icons/raw/play.svg';

SVG Paths

The raw SVG paths can be imported from this package like so:

// camelCase variant of the icon name
import { pausePaths, playPaths, ... } from 'media-icons';
// All SVG paths (server-side)
import { paths } from "media-icons";

paths.play; // string
paths.pause;
// ...
// Dynamically loaded SVG paths (client-side)
import { lazyPaths } from "media-icons";

lazyPaths.play(); // Promise<string>
lazyPaths.pause();
// ...

It's expected that the SVG paths are inserted into an <svg> element as innerHTML with the following setup:

<svg
  width="32"
  height="32"
  viewBox="0 0 32 32"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
></svg>

Figma

Our media icons are available on Figma! You can get a copy from the Vidstack community page.

📝 License

Media Icons is MIT licensed.

Keywords

FAQs

Package last updated on 15 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc