├── .gitignore ├── src ├── ui.html ├── theme.ts ├── ui.css ├── main.ts ├── use-search.ts ├── components │ ├── search-icon.tsx │ ├── icon-button.tsx │ ├── search-input.tsx │ └── streamline-logo.tsx └── ui.tsx ├── .prettierrc ├── tsconfig.json ├── manifest.json ├── package.json ├── README.md ├── webpack.config.js ├── figma.d.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build -------------------------------------------------------------------------------- /src/ui.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "all", 3 | "semi": false, 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /src/theme.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | space: [0, 4, 8, 12, 16], 3 | fontSizes: [12, 14, 16], 4 | colors: { 5 | blue: '#18a0fb', 6 | }, 7 | radii: [0, 2], 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "lib": ["dom", "esnext"], 5 | "jsx": "react", 6 | "jsxFactory": "jsx", 7 | "resolveJsonModule": true, 8 | "strict": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Feather Icons", 3 | "id": "744047966581015514", 4 | "api": "1.0.0", 5 | "ui": "build/ui.html", 6 | "main": "build/main.js", 7 | "editorType": ["figma", "figjam"], 8 | "networkAccess": { "allowedDomains": ["none"] } 9 | } 10 | -------------------------------------------------------------------------------- /src/ui.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Inter'; 3 | font-style: normal; 4 | font-weight: 400; 5 | font-display: swap; 6 | src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9') 7 | format('woff2'), 8 | url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9') 9 | format('woff'); 10 | } 11 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { icons } from 'feather-icons' 2 | 3 | figma.showUI(__html__, { width: 340, height: 420 }) 4 | 5 | figma.ui.onmessage = (message) => { 6 | const icon = figma.createNodeFromSvg(icons[message.type].toSvg()) 7 | icon.name = message.type 8 | icon.x = figma.viewport.center.x 9 | icon.y = figma.viewport.center.y 10 | figma.currentPage.selection = [icon] 11 | } 12 | -------------------------------------------------------------------------------- /src/use-search.ts: -------------------------------------------------------------------------------- 1 | import { icons } from 'feather-icons' 2 | import Fuse from 'fuse.js' 3 | import React from 'react' 4 | 5 | function useSearch(query: string) { 6 | const [results, setResults] = React.useState(Object.values(icons)) 7 | 8 | const fuse = new Fuse(Object.values(icons), { 9 | threshold: 0.2, 10 | keys: ['name', 'tags'], 11 | }) 12 | 13 | React.useEffect(() => { 14 | if (query.trim()) { 15 | setResults(fuse.search(query.trim())) 16 | } else { 17 | setResults(Object.values(icons)) 18 | } 19 | }, [query]) 20 | 21 | return results 22 | } 23 | 24 | export default useSearch 25 | -------------------------------------------------------------------------------- /src/components/search-icon.tsx: -------------------------------------------------------------------------------- 1 | import { jsx } from '@emotion/core' 2 | 3 | function SearchIcon(props: React.HTMLProps