Где я могу найти (или сделать) набор значков материалов для плотных макетов (20dp, рабочий стол) - PullRequest
Новая
       37

Где я могу найти (или сделать) набор значков материалов для плотных макетов (20dp, рабочий стол)

0 голосов
/ 15 октября 2018

Руководство по Google Material Design говорит :

На рабочем столе, когда мышь и клавиатура являются основными методами ввода, измерения могут быть уменьшены до 20dp.

Более того, я вижу, что в новом Gmail используются значки размером 20dp(снимок экрана был сделан на дисплее с низким разрешением):

20dp-sized icons used in Gmail

В то же время я не могу найти значки MDэтот размер где угодно. Google MD icons предлагает только 18dp, 24dp и больше.То же самое в хранилище .Но мне нужен именно размер 20dp.

Я пытался использовать icomoon.io , чтобы изменить сетку на 20px, и пытался использовать иконку шрифта размером 20px.Конечно, оба метода дают размытые иконки.

Где их найти?Или, как я могу увеличить / уменьшить существующие значки MD?


ОБНОВЛЕНИЕ :

Это оригинальный значок из Gmail (20 пикселей): https://www.gstatic.com/images/icons/material/system/1x/archive_black_20dp.png

archive icon

И это SVG, с 24px и желаемым размером 20px.На моем экране с низким разрешением эта 20-пиксельная SVG размыта.archive icons

<svg width='24' height='24' viewBox='0 0 24 24'><title>account balance</title>
<g id="g">
    <path d='M0 0h24v24H0z' fill='none'></path>
    <path d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'></path>
</g>
</svg>

<svg width='20' height='20' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

Вы можете использовать атрибут SVG - shape-render = "crispEdges" , чтобы отключить сглаживание браузера.

https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering

crispEdges

Указывает, что пользовательский агент должен попытаться подчеркнуть контраст между чистыми краями художественного произведенияза скорость рендеринга и геометрическую точность.Чтобы добиться четких краев, пользовательский агент может отключить сглаживание для всех линий и кривых или, возможно, только для прямых линий, близких к вертикальным или горизонтальным.Кроме того, пользовательский агент может регулировать положение линий и ширину линий, чтобы выровнять края по пикселям устройства. 

<svg width='24' height='24' viewBox='0 0 24 24'><title>account balance</title>
<g id="g" shape-rendering="crispEdges">
    <path d='M0 0h24v24H0z' fill='none'></path>
    <path d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'></path>
</g>
</svg>

<svg width='20' height='20' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>
0 голосов
/ 15 октября 2018

Элемент .svg может иметь любой размер. 

svg{border:1px solid;}
<svg width='15' height='15' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>


<svg width='24' height='24' viewBox='0 0 24 24'><title>account balance</title>
<g id="g">
    <path d='M0 0h24v24h-24z' fill='none'></path>
    <path d='M4 10v7h3v-7h-3zm6 0v7h3v-7h-3zm-8 12h19v-3h-19v3zm14-12v7h3v-7h-3zm-4.5-9l-9.5 5v2h19v-2l-9.5-5z'></path>
</g>
</svg>

<svg width='48' height='48' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

<svg width='60' height='60' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

ОБНОВЛЕНИЕ

Это ответ на обновленный вопрос OP:

Я внес некоторые изменения в ваш коди теперь у вас есть 20/20 px svg: ваш значок имеет много пустого пространства вокруг изображения.Я удалил это место.

<svg width='20' height='20' viewBox='3 3 18 18'><title>account balance</title>
<g id="g">
    <path d='M0 0h24v24H0z' fill='none'></path>
    <path id="B" d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'></path>
</g>
</svg>
...