Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Explore all our icons at phosphoricons.com.
This implementation is inspired by elm-feather.
elm install phosphor-icons/phosphor-elmAll icons have six weights; Regular, Thin, Light, Bold, Fill, and Duotone. Rendering an icon requires just a template and a weight:
import Phosphor exposing (IconWeight(..))
-- Within your view:
Phosphor.checks Bold
|> Phosphor.toHtml []
Icons behave as text, inheriting the color and font-size from their parent. Further styling can be applied with the helpers withSize, withSizeUnit, and withClass.
Phosphor.cloud Duotone
|> withSize 24
|> withSizeUnit "px"
|> withClass "custom-icon"
|> toHtml []
By default all icons render at 1em with the class ph-icon.
- @phosphor-icons/homepage ▲ Phosphor homepage and general info
- @phosphor-icons/core ▲ Phosphor icon assets and catalog
- @phosphor-icons/react ▲ Phosphor icon component library for React
- @phosphor-icons/web ▲ Phosphor icons for Vanilla JS
- @phosphor-icons/vue ▲ Phosphor icon component library for Vue
- @phosphor-icons/swift ▲ Phosphor icon component library for SwiftUI
- @phosphor-icons/elm ▲ Phosphor icons for Elm
- @phosphor-icons/flutter ▲ Phosphor IconData library for Flutter
- @phosphor-icons/webcomponents ▲ Phosphor icons as Web Components
- @phosphor-icons/figma ▲ Phosphor icons Figma plugin
- @phosphor-icons/sketch ▲ Phosphor icons Sketch plugin
- @phosphor-icons/pack ▲ Phosphor web font stripper to generate minimal icon bundles
- @phosphor-icons/theme ▲ A VS Code (and other IDE) theme with the Phosphor color palette
- phosphor-react-native ▲ Phosphor icon component library for React Native
- phosphor-svelte ▲ Phosphor icons for Svelte apps
- phosphor-r ▲ Phosphor icon wrapper for R documents and applications
- blade-phosphor-icons ▲ Phosphor icons in your Laravel Blade views
- wireui/phosphoricons ▲ Phosphor icons for Laravel
- phosphor-css ▲ CSS wrapper for Phosphor SVG icons
- ruby-phosphor-icons ▲ Phosphor icons for Ruby and Rails applications
- eleventy-plugin-phosphoricons ▲ An Eleventy plugin for add shortcode, allows Phosphor icons to be embedded as inline svg into templates
- phosphor-leptos ▲ Phosphor icon component library for Leptos apps (rust)
- wordpress-phosphor-icons-block ▲ Phosphor icon block for use in WordPress v5.8+
- ember-phosphor-icons ▲ Phosphor icons for Ember apps
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
phosphor-elm's People
Contributors
Stargazers
Watchers
phosphor-elm's Issues
Corrupt Package Data when downloading
Hey there, starting yesterday our local & CI installs started to fail with the following problem:
Starting downloads...
✗ phosphor-icons/phosphor-elm 1.0.2
Dependency problem!
-- CORRUPT PACKAGE DATA --------------------------------------------------------
I downloaded the source code for phosphor-icons/phosphor-elm 1.0.2 from:
https://github.com/phosphor-icons/phosphor-elm/zipball/1.0.2/
But it looks like the hash of the archive has changed since publication:
Expected: 9dcc8add1bd1b43db686c7c228764e5d03908e62
Actual: 28db295525e42c116eda1974ce4b7e6fee451b43
This usually means that the package author moved the version tag, so report it
to them and see if that is the issue. Folks on Elm slack can probably help as
well.
Did something change with the 1.0.2 tag in this repo that caused the change?
I did some googling and saw that in the past something like this seems to have been caused by a github issue: dillonkearns/elm-graphql#581 (comment), so maybe there's nothing that can be done here. I've also asked about this on the Elm community slack
Bundle size
While the current API feels very nice, it has the disadvantage that live code inclusion only works at the icon level, and not at the style level.
So if I use - say - Phosphor.cloud, that includes all styles in the final JS bundle.
I wonder if it would be better to have something like https://package.elm-lang.org/packages/lattyware/elm-fontawesome/latest/FontAwesome-Solid, with one module per style.
I'm up for writing a PR for this, if you want. If so, I'd be tempted to use elm-codegen instead of the current JS.
Let me know:
- what do you think of this issue
- if you're interested in a PR, and if so
2.1. if you would be fine with a PR usingelm-codegen
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.