@charcoal-ui/icons 1.0.0-alpha.1

package/src/PixivIcon.story.tsx

@@ -0,0 +1,165 @@
+/// <reference types='@types/webpack-env' />
+
+import React from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+import TestIconThatNeverExists from './16/TestIconThatNeverExists.svg'
+import { Props } from './PixivIcon'
+import { PixivIcon } from '.'
+import { KnownIconFile, KNOWN_ICON_FILES } from './filenames'
+
+interface Story<P> {
+  (args: P): React.ReactNode
+  args?: P
+}
+
+PixivIcon.extend({
+  // かぶらなそうな名前をつける
+  '16/TestIconThatNeverExists': TestIconThatNeverExists,
+})
+
+export default {
+  title: 'Icons/PixivIcon (<pixiv-icon>)',
+  argTypes: {
+    color: {
+      control: {
+        type: 'color',
+      },
+    },
+    name: {
+      control: {
+        type: 'select',
+        options: [...KNOWN_ICON_FILES, '16/TestIconThatNeverExists'],
+      },
+    },
+    scale: {
+      control: {
+        type: 'select',
+        options: [1, 2, 3],
+      },
+    },
+  },
+}
+
+const groupedIcons = KNOWN_ICON_FILES.reduce<Record<string, KnownIconFile[]>>(
+  (map, icon) => {
+    const [prefix] = icon.split('/')
+
+    if (prefix in map) {
+      map[prefix].push(icon)
+    } else {
+      map[prefix] = [icon]
+    }
+
+    return map
+  },
+  {}
+)
+
+const Global = createGlobalStyle`
+  :root {
+    font-family: Helvetica, Arial, sans-serif;
+    color: rgba(#000, 0.88);
+  }
+
+  .icon-class {
+    transform: rotate(45deg);
+  }
+`
+
+const Grid = styled.div`
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 1fr 1fr 1fr;
+`
+
+const Group = styled.div`
+  & + & {
+    margin-top: 64px;
+  }
+`
+
+const IconDef = styled.div<{ color: string }>`
+  color: ${({ color }) => color};
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+
+  pixiv-icon {
+    display: block;
+    flex-shrink: 0;
+
+    & + div {
+      flex: 1 0;
+      margin-left: 8px;
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+`
+
+const Heading = styled.h2`
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: bold;
+  margin: 16px 0;
+`
+
+const DefaultStory: Story<{
+  scale: NonNullable<Props['scale']>
+  color: string
+}> = ({ scale, color }) => (
+  <>
+    {Object.entries(groupedIcons).map(([groupName, icons]) => (
+      <Group key={groupName}>
+        <Heading>
+          {groupName} (scale: {scale})
+        </Heading>
+        <Grid>
+          {icons.map((name) => (
+            <IconDef color={color} key={name}>
+              <pixiv-icon key={scale} name={name} scale={scale} />
+              <div>{name}</div>
+            </IconDef>
+          ))}
+        </Grid>
+      </Group>
+    ))}
+    <Global />
+  </>
+)
+
+export const Default = DefaultStory.bind({})
+
+Default.args = { scale: 1, color: '#000000' }
+
+export const WithAttributes: Story<Props & { color: string }> = ({
+  name,
+  scale,
+  color,
+}) => (
+  <>
+    <IconDef color={color}>
+      <pixiv-icon class="icon-class" name={name} scale={scale} />
+      <div>アイコンと文字</div>
+    </IconDef>
+    <Global />
+  </>
+)
+
+WithAttributes.args = { name: '16/Add', scale: 1, color: '#000000' }
+
+export const WithUnsafe: Story<Props & { color: string }> = ({
+  name,
+  scale,
+  color,
+}) => (
+  <>
+    <IconDef color={color}>
+      <pixiv-icon unsafe-non-guideline-scale="3.75" name={name} scale={scale} />
+      アイコンと文字
+    </IconDef>
+    <Global />
+  </>
+)
+
+WithUnsafe.args = { name: '16/Add', scale: 1, color: '#000000' }

package/src/PixivIcon.test.tsx

@@ -0,0 +1,72 @@
+// import { loaders } from './loaders'
+import { PixivIcon } from '.'
+
+describe('PixivIcon', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  let icon: PixivIcon
+  beforeEach(() => {
+    icon = document.createElement('pixiv-icon') as PixivIcon
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    icon.waitUntilVisible = () => Promise.resolve()
+  })
+
+  it('can createElement()', () => {
+    expect(icon).toBeInstanceOf(PixivIcon)
+  })
+
+  // describe('loaders', () => {
+  //   let loadFromRawUrl: jest.SpyInstance
+  //   let loadFromFile: jest.SpyInstance
+
+  //   beforeEach(() => {
+  //     window.fetch = jest.fn(() =>
+  //       Promise.resolve({
+  //         ok: true,
+  //         text: () => Promise.resolve('{body}')
+  //       } as any)
+  //     )
+
+  //     loadFromRawUrl = jest.spyOn(loaders, 'loadFromRawUrl')
+  //     loadFromFile = jest.spyOn(loaders, 'loadFromFile')
+  //   })
+
+  //   describe('loads svg from file', () => {
+  //     it('works', async () => {
+  //       icon.setAttribute('name', '16/Add')
+  //       document.body.appendChild(icon)
+
+  //       await nextTick()
+
+  //       expect(loadFromFile).toHaveBeenNthCalledWith(1, '16/Add')
+  //     })
+  //   })
+
+  //   describe('loads svg from url', () => {
+  //     beforeAll(() => {
+  //       PixivIcon.extend({
+  //         '16/Blah': 'https://example.com/blah.svg'
+  //       })
+  //     })
+
+  //     it('works', async () => {
+  //       icon.setAttribute('name', '16/Blah')
+  //       document.body.appendChild(icon)
+
+  //       await nextTick()
+
+  //       expect(loadFromRawUrl).toHaveBeenNthCalledWith(1, 'https://example.com/blah.svg')
+  //     })
+  //   })
+  // })
+})
+
+// function nextTick() {
+//   return new Promise(resolve => {
+//     process.nextTick(resolve)
+//   })
+// }

package/src/PixivIcon.ts

@@ -0,0 +1,202 @@
+import { html, render } from 'lit-html'
+import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js'
+import type React from 'react'
+import { KnownIconFile } from './filenames'
+import { loaders as defaultLoaders, Loader } from './loaders'
+const { loadFromFile, loadFromRawUrl } = defaultLoaders
+
+const attributes = ['name', 'scale', 'unsafe-non-guideline-scale'] as const
+
+const ROOT_MARGIN = 50
+
+export interface KnownIconType extends Record<KnownIconFile, unknown> {}
+
+export interface Props
+  extends Omit<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
+    'className'
+  > {
+  name: keyof KnownIconType
+  scale?: 1 | 2 | 3 | '1' | '2' | '3'
+  'unsafe-non-guideline-scale'?: number | string
+
+  // CustomElements は className が使えない。class と書く必要がある
+  // https://ja.reactjs.org/docs/web-components.html#using-web-components-in-react
+  class?: string
+}
+
+const loaders = new Map<string, Loader>()
+
+type ExtendedIconFile = Exclude<keyof KnownIconType, KnownIconFile>
+type Extended = [ExtendedIconFile] extends [never] // NOTE: ExtendedIconFileがneverならKnownIconTypeは拡張されていない
+  ? false
+  : true
+
+export class PixivIcon extends HTMLElement {
+  static readonly tagName = 'pixiv-icon'
+
+  static extend(
+    map: Extended extends true
+      ? Record<ExtendedIconFile, string>
+      : Record<string, string>
+  ) {
+    Object.entries(map).forEach(([name, url]) => {
+      if (!name.includes('/')) {
+        throw new TypeError(
+          `${name} is not a valid icon name. "name" must be named like [size]/[Name].`
+        )
+      }
+
+      loaders.set(name, function customLoader() {
+        return loadFromRawUrl(url)
+      })
+    })
+  }
+
+  static get observedAttributes() {
+    return attributes
+  }
+
+  private svgContent?: string
+  private observer?: IntersectionObserver
+
+  get props() {
+    const partial = Object.fromEntries(
+      attributes.map((attribute) => [attribute, this.getAttribute(attribute)])
+    ) as Record<typeof attributes[number], string | null>
+
+    const name = partial.name
+
+    if (name === null) {
+      throw new TypeError('property "name" is required.')
+    }
+
+    if (!name.includes('/')) {
+      throw new TypeError(
+        `${name} is not a valid icon name. "name" must be named like [size]/[Name].`
+      )
+    }
+
+    return {
+      ...partial,
+      name,
+    }
+  }
+
+  get forceResizedSize() {
+    if (this.props['unsafe-non-guideline-scale'] === null) {
+      return null
+    }
+
+    const [size] = this.props.name.split('/')
+    const scale = Number(this.props['unsafe-non-guideline-scale'])
+
+    switch (size) {
+      case 'Inline': {
+        return 16 * scale
+      }
+
+      default: {
+        return Number(size) * scale
+      }
+    }
+  }
+
+  get scaledSize() {
+    const [size] = this.props.name.split('/')
+
+    const scale = Number(this.props.scale ?? '1')
+
+    switch (size) {
+      case 'Inline': {
+        switch (scale) {
+          case 2: {
+            return 32
+          }
+
+          default: {
+            return 16
+          }
+        }
+      }
+
+      case '24': {
+        return Number(size) * scale
+      }
+
+      default: {
+        return Number(size)
+      }
+    }
+  }
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+    this.update()
+  }
+
+  disconnectedCallback() {
+    this.observer?.disconnect()
+    this.observer = undefined
+  }
+
+  attributeChangedCallback() {
+    this.update()
+  }
+
+  render() {
+    const size = this.forceResizedSize ?? this.scaledSize
+
+    return render(
+      html`
+        <style>
+          :host {
+            display: inline-flex;
+            --size: ${size}px;
+          }
+
+          svg {
+            width: var(--size);
+            height: var(--size);
+          }
+        </style>
+        ${this.svgContent !== undefined
+          ? unsafeSVG(this.svgContent)
+          : html`<svg viewBox="0 0 ${size} ${size}"></svg>`}
+      `,
+      this.shadowRoot!
+    )
+  }
+
+  private update() {
+    void this.waitUntilVisible().then(async () => {
+      const { name } = this.props
+      const loader = loaders.get(name) ?? loadFromFile
+
+      this.svgContent = await loader(name)
+      this.render()
+    })
+  }
+
+  private waitUntilVisible() {
+    return new Promise<void>((resolve) => {
+      this.observer = new IntersectionObserver(
+        ([first]) => {
+          if (first.isIntersecting) {
+            this.observer?.disconnect()
+            this.observer = undefined
+            resolve()
+          }
+        },
+        { rootMargin: `${ROOT_MARGIN}px` }
+      )
+
+      this.observer.observe(this)
+    })
+  }
+}

package/src/declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const svg: string
+  export = svg
+}

package/src/filenames.ts

@@ -0,0 +1,10 @@
+/** This file is auto generated. DO NOT EDIT BY HAND. */
+
+/* eslint-disable */
+
+// prettier-ignore
+export const KNOWN_ICON_FILES = ["32/ShareIos","32/Dot","32/Message","32/Gift","32/Close","32/Prev","32/Next","32/PullDown","32/PullUp","32/Expand","32/Collapse","32/Edit","32/ShareAndroid","32/BookmarkOff","32/BookmarkOn","32/NovelViewerSettings","32/CommentOff","32/CommentOn","32/Home","32/Index","32/Serif","32/Camera","32/Delete","32/Pan","32/RollVertical","32/RollHorizontal","32/ZoomIn","32/Upload","32/Shopping","32/User","32/HorizontalWriting","32/Notification","32/SansSerif","32/VerticalWriting","32/NotificationOff","24/Expand","24/Collapse","24/Close","24/Pencil","24/PencilDraw","24/PencilText","24/Reorder","24/Add","24/Subtract","24/Star","24/Check","24/Send","24/LockLock","24/LockUnlock","24/Up","24/Down","24/ReloadLoop","24/Reload","24/Options","24/CommentOutline","24/Trash","24/TrashAlt","24/ShareIos","24/ViewGrid3Columns","24/ViewGrid2Columns","24/ViewList","24/Upload","24/UploadAlt","24/DownloadAlt","24/ArrowUp","24/LikeOff","24/LikeOn","24/ArrowDown","24/OptionsAlt","24/PencilLive","24/OpenInNew","24/Settings","24/Roll","24/Calendar","24/Save","24/Logout","24/CommentFill","24/ShareAndroid","16/More","16/Back","16/Search","16/Add","16/Check","16/Menu","16/Dot","16/Book","16/ArrowDown","16/Speaker","16/Remove","16/BookmarkOn","16/BookmarkOff","16/Filter","16/Error","16/Info","16/Pencil","Inline/LikeOff","Inline/View","Inline/BookmarkOff","Inline/BookmarkOn","Inline/Breadcrumbs","Inline/More","Inline/ImageResponse","Inline/Lock","Inline/External","Inline/Location","Inline/View","Inline/Like","Inline/Smile","Inline/SmileOn","Inline/Check","Inline/List","Inline/ContextMenu","Inline/Add","Inline/Remove","Inline/Images","Inline/Nextworks","Inline/Filter","Inline/Users","24/Next","24/PullDown","24/PullUp","24/Prev","24/Dot","24/Notification","24/NotificationOff","24/Search","24/Menu","24/Index","24/Services","24/Error","24/Home","24/Warning","24/Info","24/QuestionOutline","24/ChatBot","24/ErrorOctagon","24/Question","24/Alart","24/DotAlt","24/ImageHidden","24/AddRubi","24/ImageReplace","24/Text","24/AddText","24/FormatAlignRight","24/FormatAlignLeft","24/FormatAlignCenter","24/AddImage","24/ImgContain","24/ImgCover","24/BringForward","24/BringBackward","24/RotateRight","24/Palette","24/Duplicate","24/FormatLineSpacing","24/FormatLetterSpacing","24/Rotate90DegreesCc","24/Rotate90DegreesC","24/FormatFontSize","24/FormatFontFamily","24/FormatColorFill","24/FormatColorFillNoColor","24/ChromaticAberration","24/Move1","24/Play","24/Pause","24/Microphone","24/PauseAlt","24/CameraVideo","24/Camera","24/Fov","24/Sun","24/Shutter","24/Contrast","24/FrameEffect","24/Hue","24/Saturation","24/Glow","24/Binet","24/Overlay","24/Flare","24/Dust","24/Temperature","24/Filter","24/Usagi","24/Set","24/Gift","24/MobilePhone","24/Users","24/AddPeople","24/Person","24/Emoji","24/Shopping","24/UsagiAlt","24/Fashion","24/FaceEdit","24/DeviceRotation","24/Ar","24/FrameSize","24/Body","24/BodyEdit","24/HairEdit","24/ItemRemove","24/AddModel","24/ChangeCharactor","24/Pose","24/Show","24/ShowOutline","24/Hide","24/Idea","24/Book","24/Message","24/Images","24/Image","24/Video","24/Hashtag","24/ImageAlt","24/Discovery","24/Description","24/File","24/Archive","24/Invoice","24/Announcement","24/Link","24/Manga","24/Novels","24/Contest","24/LatestWorks","24/Ranking","24/Feed","24/Groups","24/Events","24/Projects","24/Codes","24/Invalid","32/LikeOff","32/LikeOn","32/LikeOnPrivate","24/ImageHidden","Inline/Folder","Inline/Pencil","Inline/Comment"] as const;
+
+export type KnownIconFile = typeof KNOWN_ICON_FILES[number];
+
+/* eslint-enable */

package/src/index.ts

@@ -0,0 +1,22 @@
+import { PixivIcon, Props } from './PixivIcon'
+export { PixivIcon, type KnownIconType, type Props } from './PixivIcon'
+export { PixivIconLoadError } from './loaders'
+
+declare global {
+  interface Window {
+    PixivIcon: typeof PixivIcon
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace JSX {
+    interface IntrinsicElements {
+      'pixiv-icon': Props
+    }
+  }
+}
+
+// TODO: HMR対応
+if (!window.customElements.get(PixivIcon.tagName)) {
+  window.PixivIcon = PixivIcon
+  window.customElements.define(PixivIcon.tagName, PixivIcon)
+}

package/src/loaders.ts

@@ -0,0 +1,56 @@
+const cache = new Map<string, string>()
+
+interface SvgModule {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __esModule: true
+  default: string
+}
+
+export class PixivIconLoadError extends Error {
+  constructor(message?: string) {
+    super(message)
+    Object.setPrototypeOf(this, new.target)
+  }
+}
+
+function createLoader(getPath: (attributeName: string) => Promise<string>) {
+  return async function getSvgString(attributeName: string): Promise<string> {
+    if (cache.has(attributeName)) {
+      return cache.get(attributeName)!
+    }
+
+    const rawSvg = await getPath(attributeName)
+      .then((path) => fetch(path))
+      .then((response) => {
+        if (!response.ok) {
+          throw new PixivIconLoadError(
+            `Failed to fetch <pixiv-icon name="${attributeName}">`
+          )
+        }
+
+        return response.text()
+      })
+
+    cache.set(attributeName, rawSvg)
+
+    return rawSvg
+  }
+}
+
+export type Loader = ReturnType<typeof createLoader>
+
+const loadFromRawUrl: Loader = createLoader((attributeName) =>
+  Promise.resolve(attributeName)
+)
+
+const loadFromFile: Loader = createLoader(async (attributeName) => {
+  const [size, name] = attributeName.split('/')
+
+  const { default: filename } = (await import(
+    `../svg/${encodeURIComponent(size)}/${encodeURIComponent(name)}.svg`
+  )) as SvgModule
+
+  return filename
+})
+
+export const loaders = { loadFromRawUrl, loadFromFile }

package/svg/16/Add.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 9h3a1 1 0 100-2H9V4a1 1 0 00-2 0v3H4a1 1 0 000 2h3v3a1 1 0 102 0V9z" fill="currentColor"></path></svg>

package/svg/16/ArrowDown.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 9.586l2.293-2.293a1 1 0 111.414 1.414L8 13.414 3.293 8.707a1 1 0 011.414-1.414L7 9.586V3.5a1 1 0 012 0v6.086z" fill="currentColor"></path></svg>

package/svg/16/Back.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.961 11.043a1 1 0 01-1.414 1.414L4.09 8l4.457-4.457a1 1 0 011.414 1.414L6.92 8l3.042 3.043z" fill="currentColor"></path></svg>

package/svg/16/Book.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.342 4.386A.5.5 0 004 4.86v6.946a.5.5 0 00.658.475l5-1.667A.5.5 0 0010 10.14V3.194a.5.5 0 00-.658-.475l-5 1.667z" fill="currentColor"></path><path d="M11.5 3.5a.5.5 0 00-.5.5v7.576l-5.582.93a.5.5 0 00.164.987l6-1A.5.5 0 0012 12V4a.5.5 0 00-.5-.5z" fill="currentColor"></path></svg>

package/svg/16/BookmarkOff.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 11.5l5 2.5V4a2 2 0 00-2-2H5a2 2 0 00-2 2v10l5-2.5zm-4 .882l4-2 4 2V4a1 1 0 00-1-1H5a1 1 0 00-1 1v8.382z" fill="currentColor"></path></svg>

package/svg/16/BookmarkOn.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M11 2H5a2 2 0 00-2 2v10l5-2.5 5 2.5V4a2 2 0 00-2-2z" fill="currentColor"></path></svg>

package/svg/16/Check.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.707 8.293a1 1 0 00-1.414 1.414L7 12.414l5.707-5.707a1 1 0 00-1.414-1.414L7 9.586 5.707 8.293z" fill="currentColor"></path></svg>

package/svg/16/Dot.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.5 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM14 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" fill="currentColor"></path></svg>

package/svg/16/Error.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 3.5a1 1 0 00-2 0v5a1 1 0 002 0v-5zM8 13.5A1.25 1.25 0 108 11a1.25 1.25 0 000 2.5z" fill="currentColor"></path></svg>

package/svg/16/Filter.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.099 3.567A1 1 0 014 3h8a1 1 0 01.78 1.625L9 9.35V12a2 2 0 01-2 2V9.35L3.22 4.626a1 1 0 01-.121-1.058z" fill="currentColor"></path></svg>

package/svg/16/Info.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 16A8 8 0 118 0a8 8 0 010 16z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14 8A6 6 0 112 8a6 6 0 0112 0zM8 6.25a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5zm-1 1.5v3.5a1 1 0 102 0v-3.5a1 1 0 00-2 0z" fill="#fff"></path></svg>

package/svg/16/Menu.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 9.086L4.957 6.043a1 1 0 00-1.414 1.414L8 11.914l4.457-4.457a1 1 0 00-1.414-1.414L8 9.086z" fill="currentColor"></path></svg>

package/svg/16/More.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.043 4.957a1 1 0 011.414-1.414L11.914 8l-4.457 4.457a1 1 0 01-1.414-1.414L9.086 8 6.043 4.957z" fill="currentColor"></path></svg>

package/svg/16/Pencil.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9.974 3.193a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.414l-1.06 1.061-2.829-2.828 1.061-1.061zM8.206 4.96L3.61 9.558l-.56 2.8a.5.5 0 00.588.588l2.8-.56 4.597-4.596-2.829-2.828z" fill="currentColor"></path></svg>

package/svg/16/Remove.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.207 5.207a1 1 0 00-1.414-1.414L8 6.586 5.207 3.793a1 1 0 10-1.414 1.414L6.586 8l-2.793 2.793a1 1 0 101.414 1.414L8 9.414l2.793 2.793a1 1 0 001.414-1.414L9.414 8l2.793-2.793z" fill="currentColor"></path></svg>

package/svg/16/Search.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.757 12.172a5 5 0 111.414-1.414l2.036 2.035a1 1 0 01-1.414 1.414l-2.036-2.035zM11 8a3 3 0 11-6 0 3 3 0 016 0z" fill="currentColor"></path></svg>

package/svg/16/Speaker.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7 5.875H5a1 1 0 00-1 1v2.25a1 1 0 001 1h2.063l3.086 3.037a.5.5 0 00.851-.356V3.181a.5.5 0 00-.848-.36L7 5.875z" fill="currentColor"></path></svg>

package/svg/24/Add.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 10h4a2 2 0 110 4h-4v4a2 2 0 11-4 0v-4H6a2 2 0 110-4h4V6a2 2 0 114 0v4z" fill="currentColor"></path></svg>

package/svg/24/AddImage.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 6h2c.55 0 1-.45 1-1s-.45-1-1-1h-2V2c0-.55-.45-1-1-1s-1 .45-1 1v2h-2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18 8a2 2 0 003 1.732V17a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h9.268A2 2 0 0017 7h1v1zm-7 7.51l-2.1-2.53a.493.493 0 00-.78.02l-2.49 3.2c-.26.33-.03.81.39.81h11.99a.5.5 0 00.4-.8l-3.51-4.68c-.2-.27-.6-.27-.8-.01L11 15.51z" fill="currentColor"></path></svg>

package/svg/24/AddModel.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 4a2 2 0 11-4 0 2 2 0 014 0z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M6 8a1 1 0 011-1h10a1 1 0 110 2h-2.5v8a1 1 0 11-2 0v-4h-1v4a1 1 0 11-2 0V9H7a1 1 0 01-1-1zm5.5 1v2h1V9h-1z" fill="currentColor"></path><path d="M6 11a1 1 0 00-.949.684l-3 9A1 1 0 003 22h18a1 1 0 00.949-1.316l-3-9A1 1 0 0018 11h-.5a1 1 0 00-.23 1.973L19.613 20H4.387l2.343-7.027A1 1 0 006.5 11H6z" fill="currentColor"></path><path d="M14 4a2 2 0 11-4 0 2 2 0 014 0z" stroke="#fff"></path><path clip-rule="evenodd" d="M6 8a1 1 0 011-1h10a1 1 0 110 2h-2.5v8a1 1 0 11-2 0v-4h-1v4a1 1 0 11-2 0V9H7a1 1 0 01-1-1zm5.5 1v2h1V9h-1z" stroke="#fff"></path><path d="M6 11a1 1 0 00-.949.684l-3 9A1 1 0 003 22h18a1 1 0 00.949-1.316l-3-9A1 1 0 0018 11h-.5a1 1 0 00-.23 1.973L19.613 20H4.387l2.343-7.027A1 1 0 006.5 11H6z" stroke="#fff"></path></svg>

package/svg/24/AddPeople.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 3a1 1 0 011 1v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0V8h-2a1 1 0 110-2h2V4a1 1 0 011-1z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 14.5a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5zm0 0c-3.038 0-5.5 2.381-5.5 5.318V20a1 1 0 001 1h9a1 1 0 001-1v-.182c0-2.937-2.462-5.318-5.5-5.318z" fill="currentColor"></path></svg>

package/svg/24/AddRubi.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.5 6a1 1 0 011-1h1a1 1 0 011 1v10.5a.5.5 0 01-.5.5.5.5 0 00-.5.5v.5a1 1 0 01-1 1h-2a1 1 0 110-2 1 1 0 001-1V6zM9.5 6a1 1 0 00-1-1h-1a1 1 0 00-1 1v12a1 1 0 001 1H9a.5.5 0 00.5-.5.5.5 0 01.5-.5h.5a1 1 0 100-2 1 1 0 01-1-1V6zM16.5 6a1 1 0 00-1-1h-1a1 1 0 00-1 1v10.5a.5.5 0 00.5.5.5.5 0 01.5.5v.5a1 1 0 001 1h6a1 1 0 100-2h-4a1 1 0 01-1-1v-3a1 1 0 011-1h4a1 1 0 100-2h-4a1 1 0 01-1-1V6zM20.5 5.5a.5.5 0 011 0v2a.5.5 0 01-1 0v-2zM23.5 5.5a.5.5 0 00-1 0v2a.5.5 0 001 0v-2z" fill="currentColor"></path></svg>

package/svg/24/AddText.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 7h2c.55 0 1-.45 1-1s-.45-1-1-1h-2V3c0-.55-.45-1-1-1s-1 .45-1 1v2h-2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V7z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.105 4c.793 0 1.51.491 1.794 1.228l5.251 13.845C16.49 20 15.81 21 14.81 21h-.02a1.436 1.436 0 01-1.34-.926L12.034 16H6.182L4.76 20.056A1.426 1.426 0 013.42 21a1.415 1.415 0 01-1.323-1.927L7.33 5.228A1.883 1.883 0 019.105 4zm.018 3.608L11.341 14H6.883l2.24-6.392z" fill="currentColor"></path></svg>

package/svg/24/Alart.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 2a4 4 0 00-4 4v11h16V6a4 4 0 00-4-4H8zm0 2a2 2 0 00-2 2v1a1 1 0 002 0V6h2a1 1 0 100-2H8z" fill="currentColor"></path><path d="M2 20a1 1 0 011-1h18a1 1 0 011 1v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-1z" fill="currentColor"></path></svg>

package/svg/24/Announcement.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.366 5.858l7.272-2.828A1 1 0 0120 3.962v3.164a4.002 4.002 0 010 7.748v3.164a1 1 0 01-1.362.932l-7.272-2.828a3.004 3.004 0 00-.756-.185l-.61-.068V6.11l.61-.068a3 3 0 00.756-.185zM21 11a2 2 0 00-1-1.732v3.464A2 2 0 0021 11z" fill="currentColor"></path><path d="M8 6.333l-3.331.37A3 3 0 002 9.686v2.63a3 3 0 002.669 2.982l3.331.37V6.333zM4.586 17.286l.902 3.008a2.395 2.395 0 004.587-1.377l-.316-1.055-5.09-.565a3.204 3.204 0 01-.083-.01z" fill="currentColor"></path></svg>

package/svg/24/Ar.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h5a1 1 0 010 2H4v3a1 1 0 01-2 0V2zM22 2v5a1 1 0 11-2 0V4h-3a1 1 0 110-2h5zM22 22h-5a1 1 0 110-2h3v-3a1 1 0 112 0v5zM2 22v-5a1 1 0 112 0v3h3a1 1 0 110 2H2zM11.5 5.134a1 1 0 011 0l5.196 3a1 1 0 01.5.866v6a1 1 0 01-.5.866l-5.196 3a1 1 0 01-1 0l-5.196-3a1 1 0 01-.5-.866V9a1 1 0 01.5-.866l5.196-3zm-3.696 5.598v3.69L11 16.269v-3.69l-3.196-1.846zM13 12.577v3.69l3.196-1.844v-3.691L13 12.577zM15.196 9L12 10.845 8.804 9 12 7.155 15.196 9z" fill="currentColor"></path></svg>

package/svg/24/Archive.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 5.5c0-.466 0-.699.076-.883a1 1 0 01.541-.54C3.801 4 4.034 4 4.5 4h15c.466 0 .699 0 .883.076a1 1 0 01.54.541c.077.184.077.417.077.883s0 .699-.076.883a1 1 0 01-.541.54C20.199 7 19.966 7 19.5 7h-15c-.466 0-.699 0-.883-.076a1 1 0 01-.54-.541C3 6.199 3 5.966 3 5.5z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4 9.6c0-.56 0-.84.109-1.054a1 1 0 01.437-.437C4.76 8 5.04 8 5.6 8h12.8c.56 0 .84 0 1.054.109a1 1 0 01.437.437C20 8.76 20 9.04 20 9.6v5.6c0 1.68 0 2.52-.327 3.162a3 3 0 01-1.311 1.311C17.72 20 16.88 20 15.2 20H8.8c-1.68 0-2.52 0-3.162-.327a3 3 0 01-1.311-1.311C4 17.72 4 16.88 4 15.2V9.6zm6 .4a1 1 0 100 2h4a1 1 0 100-2h-4z" fill="currentColor"></path></svg>

package/svg/24/ArrowDown.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 19.414l-6.707-6.707a1 1 0 111.414-1.414L11 15.586V5a1 1 0 112 0v10.586l4.293-4.293a1 1 0 011.414 1.414L12 19.414z" fill="currentColor"></path></svg>

package/svg/24/ArrowUp.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.586l6.707 6.707a1 1 0 01-1.414 1.414L13 8.414V19a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 11-1.414-1.414L12 4.586z" fill="currentColor"></path></svg>