任务图标
用于待办项目的191个二重唱图标,每个一升网络组件: <c2-task-icon-mail>, (中文(简体) ), <c2-task-icon-meeting>, (中文(简体) ),
<c2-task-icon-run>, (中文(简体) ), <c2-task-icon-cook>还有更多 它们涵盖了任务列表中通常涉及的主题
15个群体:工作、通信、技术、学习、健康、体育、家庭、食品、购物、金融、旅行、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育、教育,
休闲,自然与规划. @c2n/todo-list 绘制其任务图标和取出图标的图标.
艺术画作是用一个 24x24 网格绘制的这个软件包(麻省理工学院,像其他寄存器一样):
currentColor 超过同一种颜色的软锡,所以一个图标取出它所坐入的文字或瓷砖的颜色.
安装
npm install @c2n/task-icons
使用量
只导入您使用的图标 :
import '@c2n/task-icons/icons/mail.js'
<c2-task-icon-mail></c2-task-icon-mail>
或者登记整个集:
import '@c2n/task-icons'
图标默认为装饰( Namearia-hidden) (中文(简体) ). 给它 label 当没有附近的文字 说同样的事情:
<c2-task-icon-cart label="Groceries"></c2-task-icon-cart>
选择任务图标
每个图标都带有关键词(call打电话,电话,铃声,拨号,联系,妈妈,爸爸... suggestTaskIcon() 返回时
图标,其关键字最符合文本,这就是待办事宜列表如何从标题中选择列表的图标:
import { suggestTaskIcon } from '@c2n/task-icons/suggest-task-icon.js'
suggestTaskIcon('Book the dentist') // 'tooth'
suggestTaskIcon('Team standup') // 'meeting'
suggestTaskIcon('Something unrelated') // undefined
taskIconCatalog (从) @c2n/task-icons/task-icon-names.js)列出每个项目的名称、标题、类别和关键词
图标,用于您自己的拾取器和搜索字段; taskIconTag(name) 给出元素的标记名称.
样式
| 变量 | 默认 | 说明 |
|---|---|---|
--c2-task-icon--size | 24px | 图标的宽度和高度. |
--c2-task-icon--color | currentColor | 轮廓和坚固的颜色. |
--c2-task-icon--stroke-width | 1.75 | 轮廓宽度,以24×24画布为单位. |
--c2-task-icon__tone--color | currentColor | 柔软多音填充的颜色 . |
--c2-task-icon__tone--opacity | 0.18 | 软填充不透明; 0 仅绘制大纲. |
添加图标
绘制 svg/<name>.svg 24x24网格上 (精确的包装) <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">, (中文(简体) ),
将标题、类别和关键字添加到 svg/catalog.json运行 npm run generate -w packages/icons/task-icons。 。 。 .
没有分类的元素是大纲; class="tone" 加上软填充, fill 是柔软的
solid 一个小小的坚固标记。 生成器拒绝硬编码的颜色,中风和样式.