Phosphor Icons 的主页,这是一款适用于所有人的灵活图标系列
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
More ways to use at phosphoricons.com.
Phosphor is available for web, React, Vue, Flutter, Elm, and other frameworks and platforms.
<head>, and drop in icons with an <i/> tag and the appropriate class:<!doctype html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/regular/style.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/@phosphor-icons/[email protected]/src/fill/style.css"
/>
</head>
<body>
<i class="ph ph-smiley"></i>
<i class="ph-fill ph-heart" style="color: hotpink"></i>
<i class="ph ph-cube"></i>
</body>
</html>
Check out the full documentation on the @phosphor-icons/web repo page.
color, size, and weight of an icon with a few keystrokes, provide default styles to all icons via the Context API, or directly manipulate the SVG at runtime through render props to do some amazing things! Check out the full documentation on the @phosphor-icons/react repo page.import React from "react";
import ReactDOM from "react-dom";
import { Smiley, Heart, Horse } from "@phosphor-icons/react";
const App = () => {
return (
);
};
ReactDOM.render(<App />, document.getElementById("root"));
style objects, onClick handler functions, and a multitude of other props you're used to using on SVGs.color, size, and weight of an icon with a few keystrokes, or provide default styles to all icons via the provide/inject API. It is fully tree-shakable and ready to use right away. Check out the full documentation on the @phosphor-icons/vue repo page.<template>
</template>
<script>
import { PhHorse, PhHeart, PhCube } from "@phosphor-icons/vue";
export default {
name: "App",
components: {
PhHorse,
PhHeart,
PhCube,
},
};
</script>
[!NOTE] Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with
Ph, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
If you've made a port of Phosphor and you want to see it here, just open a PR here!
MIT © Phosphor Icons
暂无开放 Issues，或尚未同步最近议题。