智慧物流>> svelte-feather>> 返回
项目作者： novacbn

项目描述 ：
Feather Icons as Svelte Components
高级语言： HTML
项目地址: git://github.com/novacbn/svelte-feather.git
创建时间： 2020-05-20T09:44:04Z
项目社区：https://github.com/novacbn/svelte-feather
开源协议：MIT License
下载


svelte-feather

DEPRECATED: Check out Lucide Icons a community fork of Feather Icons, they now have a Svelte Package available.

Feather Icons as Svelte Components

Icon Viewer

Visit the Icon Viewer to find all the available Icon Components and import examples.

Installation

Latest Release

  1. npm install github:novacbn/svelte-feather#0.1.0

Current master Branch

  1. npm install github:novacbn/svelte-feather

WebComponents

This library can also be used standalone as WebComponents. Just head over to Releases to pick up a build and load via <script>:

  1. <script type="application/javascript" src="/path/to/svelte-feather.webcomponents.min.js"></script>

Usage

Goto to the Icon Viewer and find the class name of the icon you want to use, then import it like so:

  1. <script>
  2.     import {Icons} from "svelte-feather/components";
  3. </script>
  5. <Icons.Github size="large" ></Icons.Github>

Alternatively, you can do “fine-grained” imports as-well if your environment supports it, for better Build Tools / IDE experience:

  1. <script>
  2.     import Github from "svelte-feather/components/Github";
  3. </script>
  5. <Github size="large" ></Github>

If using via the WebComponents build, just use all-lowercase identifiers, prefixing feather-*. Putting dashes infront of captials:

  1. <feather-arrow-right-circle size="large" ></feather-arrow-right-circle>

Properties

Name Type Default Enumeration
class string `` HTML class Attribute
style string `` HTML style Attribute
color string currentColor CSS Color Data Type
size string default ["default", "tiny", "small", "medium", "large", "huge"], CSS Length Data Type
width string 1em CSS Length Data Type
fill string none SVG fill Attribute
linecap string round SVG stroke-linecap Attribute
linejoin string round SVG stroke-linejoin Attribute

Development

Building Package

To build svelte-feather from source, first use npm ci to install all the dependencies. Use the commands below to execute the build-pipline.

npm run build:icons

Runs through build:icons:generate -> build:icons:webcomponents pipeline.

npm run build:icons:generate

Imports the icon data from the feathericons/feather NPM package, and generates the following:

  • components/${class_name}.svelte — The Svelte Component of each SVG icon
  • components/${class_name}.js — Stub re-exporter file to improve DX around “fine-grained” imports
  • components/index.js — The import module that collects every Svelte Component and re-exports them
  • components/webcomponents.js — Similar to above, but without re-exporting to save file size space in WebComponents build
  • docs/src/icons.js — The documentation manifest, which imports all the Svelte Components from svelte-feather and associates them with metadata

npm run build:icons:webcomponents

Uses ESBuild to build and bundle all the Svelte Components together in a single file as WebComponents.

npm run prebuild:clean

Runs rimraf ./dist/;rimraf ./components to wipe current build of Icon Components and WebComponents bundle.

Building Icon Viewer

To build the “Icon Viewer” from source, cd to docs/. Then use npm ci to install all the dependencies. Use the commands below to execute the build-pipline.

npm run build:application

Runs SvelteKit to build the documentation Application out to the docs/build/ directory.

npm run serve:application

Similar to npm run build:application, runs SvelteKit to serve a live-reload enabled HTTP server on port 3000 for debugging the Icon Viewer.

npm run prebuild:clean

Runs rimraf ./build to wipe the current Icon Viewer build.