Order food icon
New Added in v0.6.0
A free pencil-style order food icon, drawn by code from 1 arc, 2 lines, 1 circle and 1 closed shape. Use it as an SVG, a React component, or by name. MIT licensed.
01Use it
Use order-food
One package, four ways in. The icon inherits currentColor and is decorative unless you give it a title. Install it with npm i @matita/icons.
React
import { OrderFood } from '@matita/icons/react';
<OrderFood size={24} />
// or by name
import { SketchIcon } from '@matita/icons/react';
<SketchIcon name="order-food" />JavaScript
import { OrderFood, toSvg } from '@matita/icons';
toSvg(OrderFood, { size: 24 }); // SVG stringSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" overflow="visible" class="sketch-icon sketch-icon-order-food" data-sketch="" aria-hidden="true"><path d="M3.46 12.66C3.55 12.22 3.66 10.84 3.97 10.02C4.27 9.2 4.71 8.38 5.28 7.74C5.85 7.09 6.61 6.52 7.4 6.14C8.19 5.77 9.13 5.49 10 5.48C10.87 5.46 11.83 5.69 12.65 6.04C13.46 6.39 14.3 6.93 14.89 7.58C15.48 8.24 15.92 9.13 16.18 9.97C16.43 10.82 16.37 12.2 16.41 12.65" stroke-width="1.488"/><path d="M3.07 12.01Q9.96 11.49 16.85 11.94" stroke-width="1.728"/><path d="M2.21 15.41Q6.78 15.51 11.34 15.31" stroke-width="1.584"/><path d="M10.05 5.07C9.97 5.07 9.73 5.08 9.58 5.04C9.43 4.99 9.26 4.92 9.14 4.82C9.03 4.71 8.94 4.55 8.87 4.4C8.81 4.25 8.74 4.08 8.73 3.91C8.72 3.74 8.76 3.54 8.84 3.39C8.92 3.23 9.06 3.1 9.2 2.98C9.34 2.86 9.51 2.74 9.69 2.69C9.86 2.63 10.08 2.62 10.27 2.65C10.46 2.68 10.67 2.74 10.84 2.84C11.01 2.94 11.17 3.1 11.28 3.26C11.39 3.43 11.49 3.64 11.52 3.84C11.55 4.04 11.52 4.26 11.46 4.47C11.41 4.67 11.32 4.89 11.19 5.06C11.05 5.22 10.85 5.37 10.65 5.46C10.45 5.56 10.21 5.62 9.98 5.62C9.75 5.63 9.5 5.59 9.29 5.5C9.08 5.42 8.8 5.17 8.7 5.1" stroke-width="1.52"/><path d="M12.07 10.5Q12.06 14.68 11.97 18.85Q13.22 18.04 14.32 17.03Q14.93 18.58 15.5 20.13Q16.28 19.77 17.1 19.49Q16.28 18.12 15.58 16.68Q16.94 16.67 18.29 16.68Q15.29 13.49 12.07 10.5Q12.06 11.35 12.05 12.21" stroke-width="1.472"/></svg>Pencil variant
import '@matita/icons/pencil.css';
import { OrderFood } from '@matita/icons/react';
<OrderFood size={32} pencil />The file is icons/order-food.svg in the package (pencil/order-food.svg for the pencil variant). Matita 0.6.0.
02How it's drawn
The recipe for order-food
Order food is not stored as a drawing. It is a recipe of 1 arc, 2 lines, 1 circle and 1 closed shape on a 24 by 24 grid, and a small program draws it like a pencil would. The wobble comes from the name, so it always comes out the same.
A 10 12 6.5 180 360;
L 3.5 12 16.5 12;
L 2.5 15.5 11 15.5;
C 10 4 1.1;
Z 12 10.5 12 19 14.2 17 15.6 20.2 17 19.6 15.6 16.6 18.3 16.6order-food as a number: 2531976446
Shapes: L line, P polyline, Z closed shape, R rectangle, C circle, E ellipse, A arc, Q curve, O dot. Separate shapes with ;. Edits stay on this page.
03Takes, sizes, pencil
Same icon, every way
Pass a seed for another take of the same recipe. The wobble is capped, so it still reads at 16 px.
Five seeds of order-food. Seed 0 is the default.
order-food from exact shapes (wobble 0) to the full hand (wobble 1, the default). The exact version is also a ready-made file: exact/order-food.svg.
True pixel sizes.