Слияние кода завершено, страница обновится автоматически
Перевод текста на русский язык:
The premium icon font for uiwjs Component Library. Designed by @liwen0526.
Посетите https://uiwjs.github.io/icons/ и ознакомьтесь с функцией поиска, которая содержит ключевые слова, идентифицирующие общие названия и стили иконок. Например, если вы ищете «стрелка», мы вызываем каждую иконку, которую можно использовать в качестве стрелки. Мы также включили имя класса каждой иконки для удобства копирования / вставки при разработке!
Они бесплатны и лицензированы по MIT. Мы предполагаем, что этот набор иконок будет использоваться с uiw, но он никоим образом не ограничивается этим. Используйте их везде, где считаете нужным, в личных или коммерческих целях.
# v1.x +
npm install uiw-iconfont --save
# v2.x
npm install @uiw/icons --save
Вы можете использовать https://uiwjs.github.io/icons/ для лёгкого поиска нужной иконки. После того как вы скопировали имя класса желаемой иконки, просто добавьте иконку и имя её класса, например apple, к элементу HTML.
Вам нужно связать CSS:
<link rel="stylesheet" type="text/css" href="node_modules/@uiw/icons/w-icon.css">
Используется в Less:
@import "~@uiw/icons/fonts/w-icon.css";
Используется в JS:
import '@uiw/icons/fonts/w-icon.css';
// или
import '@uiw/icons/fonts/w-icon.less';
Примечание: у него есть префикс w-icon-.
<i class="w-icon-apple"></i>
Или используйте Unicode, вы можете использовать веб-сайт Unicode, чтобы легко найти нужную иконку Unicode.
<style>
.iconfont{
font-family: "w-icon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
<span class="iconfont"></span>
Или вручную загрузите и свяжите @uiw/icons в своём HTML, его также можно загрузить через UNPKG:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@uiw/icons/fonts/w-icon.css">
<span class="w-icon-adobe"></span>
В Webpack
{
test: /w-icon\.(eot|ttf|svg)$/,
use: [
{
loader: require.resolve('url-loader'),
options: { limit: 8192 }
},
{
loader: require.resolve('file-loader'),
options: {
name: 'static/fonts/[name].[hash:8].[ext]',
}
}
]
},
Создайте компонент Icon.
import React from 'react';
import svgPaths from '@uiw/icons/fonts/w-icon.json';
const renderSvgPaths = (type) => {
const pathStrings = svgPaths[type];
if (pathStrings == null) {
return null
}
return pathStrings.map((d, i) => <path key={i} d={d} fillRule="evenodd" />)
}
export default class Icon extends React.PureComponent {
render() {
const { type, color } = this.props;
if (type == null || typeof type === "boolean") {
return null;
}
return (
<svg fill={color} viewBox={`0 0 24 24`}>{this.renderSvgPaths(type)}</svg>
);
}
}
Используйте Icon: Компонент:
const demo = () => {
return (
<Icon type="heart-on" />
)
}
После клонирования проекта выполните команду npm install для установки зависимостей. После этого вы сможете:
*.svg, *.ttf, *.woff, *.eot с помощью команды:npm run font
npm run start
Создано svgtofont, лицензия MIT.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )