bytedance / iconpark Goto Github PK

项目：vue3 - vite - TS
错误描述：import {IconPark} from '@icon-park/vue-next/all'; 提示找不到模块 IconPark

图片加载失败可以用到

比如注册登录里面常见的验证码输入框前面的 icon

未勾选&已勾选

https://i.imgur.com/x0QWm5h.jpg

分别是：
钥匙 key
刷新 refresh-one
广告产品 ad-product
录音 voice
摇滚手势 rock-gesture
文件夹 开 folder-open
表格
区域图
地图
电池充电

切换「拐点类型」没看到图标有明显的变化

lark 图标只有填充的，没有线性的，感觉不太美观

Version

@byte-design/icons: 0.11.7
@icon-park/react: 1.0.9

What's the question?

• The Loading icon can't always rotate
• I added style to the Return icon but does not work

What is expected?

The Loading icon should always rotate and the Return icon added style can take effect. I don't know if the other ICONS have problems.

比如我要搜索“问号”图标，直接搜索结果是空，但如果我换成“问”这个关键字进行搜索，就会在符号里搜索到名字叫“帮助”的图标。
我问下这个关键字的匹配能不能让用户自定义？
就如上面的例子，我第一次可能需要通过“问”关键字才能搜索到“帮助”图标；
但我可以在搜索到这个结果后为其设置成“问号”关键字，这样下次我搜索“问号”或者“问”一样也能出现“帮助”图标。
以上愚见可以参考下。谢谢~

需要去掉 overflow-y : hidden

在我的babel.config.js中，我的配置如下：

plugins = [
  [
    'import',
    {
      libraryName: 'ant-design-vue',
      libraryDirectory: 'es',
      style: true,
    },
    'ant-design-vue',
  ],
  [
    'import',
    {
      libraryName: '@icon-park/vue',
      libraryDirectory: 'es/icons',
      camel2DashComponentName: false,
    },
    '@icon-park/vue',
  ],
]

这样配置的话，就会导致import { DEFAULT_ICON_CONFIGS } from '@icon-park/vue'报错：DEFAULT_ICON_CONFIGS is not defined
在我查看了库目录之后，发现DEFAULT_ICON_CONFIGS的导出文件不在es/icons下，我猜测是没有正确配置libraryDirectory的原因导致报错，所以应该如何正确配置呢？期待解答~

• 右侧工具栏刷新后错位
• 左侧导航栏定位高亮不准确

环境：
win10
Chrome (86.0) & Edge (86.0)

在vue中使用video图标会报错，报错信息:Do not use built-in or reserved HTML elements as component id: video

currentColor，只为继承父级颜色，你不让设置，这怎么搞？

例如iconfont，可以github 登录，然后加到购物车去，下次可以进到购物车看自己挑好的图标

个人认为 iconPark 有时间的话可以考虑一手，初版先把用户勾选选中的也存到浏览器里（local storage 或 indexed db之类的都不错吧），下次打开页面选中的就默认被选中

后续如果风格调整，直接改右侧菜单的配置，左侧所有选中图标都能看到效果就挺不错的

不然截图存起来自己选中了哪些，下回再一个个搜出来，再整体调整样式，哇，想都不敢想

当然，这只是个建议

现在下载下来的名称默认是英文，对于我这种英文不好的来说，常见的还可以翻译，大部分都不认识，下载的一多，就分不清谁是谁了，建议让下载下来的默认名称含有中文，或者说支持中英文切换，可以选择中文下载还是英文下载。

希望能有关于物流的图标

应用背景

很多场景中，对 React 开发者来说，并不需要引入整个 @icon-park/react 库。他们只想在 IconPark 中在线选择想要的图标，即贴即用就行，但是目前 IconPark 平台仅支持 svg，希望能加入复制 jsx/tsx 功能。

写法差异

svg

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
  <path d="M9 18V42H39V18L24 6L9 18Z" fill="#2F88FF"/>
  <path d="M9 42V18L4 22L24 6L44 22L39 18V42H9Z" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
  <path d="M19 29V42H29V29H19Z" fill="#43CCF8" stroke="white" stroke-width="4" stroke-linejoin="round"/>
  <path d="M9 42H39" stroke="black" stroke-width="4" stroke-linecap="round"/>
</svg>

jsx

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="48"
  height="48"
  fill="none"
  viewBox="0 0 48 48"
>
  <path fill="#fff" fillOpacity="0.01" d="M0 0H48V48H0z"></path>
  <path fill="#2F88FF" d="M9 18v24h30V18L24 6 9 18z"></path>
  <path
    stroke="#000"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth="4"
    d="M9 42V18l-5 4L24 6l20 16-5-4v24H9z"
  ></path>
  <path
    fill="#43CCF8"
    stroke="#fff"
    strokeLinejoin="round"
    strokeWidth="4"
    d="M19 29v13h10V29H19z"
  ></path>
  <path
    stroke="#000"
    strokeLinecap="round"
    strokeWidth="4"
    d="M9 42h30"
  ></path>
</svg>

实现方式

使用这个库 svg2jsx 将 svg 转化成 jsx 即可。

import transform from '@svg2jsx/transform';

- onClipboard(svg)
+ onClipboard(transform(svg, {}))

Pull Requst

如果可以，我想加入 IconPart 大家庭，提 PR，成为 contributor 之一，谢谢 @AppleMonkey2019

https://www.reddit.com/r/reactjs/comments/j1kgk3/bytedance_opensourced_iconpark_on_github/

vue 版本 2.6.12

删除node_moudules和 yarn.lock 重新 yarn 无效

{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@icon-park/vue": "^1.0.11",
"axios": "^0.20.0",
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"vue": "^2.6.12",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.12"
}
}

I've noticed that there is a ordered-list icon. It would be great to have an unordered one

Hi! Nice icons and website!

I noticed that you're using react-color on your website.
Just want to suggest you consider using a lighter and faster option since react-color is 140 KB (far larger than the entirety of react-dom), is not tree-shakeable, is not accessible, does not support keyboard navigation, pulls in 11 dependencies, and is not as fast as it could be. See https://bundlephobia.com/[email protected]

Several months ago I created react-colorful as a modern replacement for react-color. My library is 18 times lighter (less than 2 KB gzip) and way faster:

• Demo
• Docs
• Benchmarks
• Article on DEV.to

Let me know if you're interested in using my component or if you need any help with migration.

Regards,
Vlad

[BUG] 在Vue中, 是不是click事件没有向父组件发送emit('click'), 导致我使用@click无法调用methods内的函数, 代码如下

<full-screen-one
      theme="outline"
      size="24"
      fill="#fff"
      @click="fullScreen"
/>

通过console发现, 并没有打印出我预期的结果, 换个方式说, 根本就没有调用到fullScreen函数

希望添加更多功能类图标。

TT4B 看到一个标好似没见到，建议考虑增加

设备：杠铃、哑铃、器械、无器械
锻炼部位：胸部、肩膀、等等。

如果你们准备开始搞，我可以帮你们做一个分类整理

小区 社区 新房 二手房 这种呀

希望能把选择的图标加入到项目里，这样可以知道项目使用了哪些图标。（可以不用存储到云端，可以的话更好）

import {IconPark} from '@icon-park/vue/all';
我使用该语句全局导入IconPark, npm提示找不到@icon-park/vue/all, 按需导入没有问题且可以正常使用, 全局导入报错信息如下

 ERROR  Failed to compile with 1 errors   17:00:13
This dependency was not found:

* @icon-park/vue/all in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/material/list.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @icon-park/vue/all

国内高质量的图标库真的不多，感觉这个还不错，虽然还有各种小瑕疵，不过都可以接受，希望越高越好，弄个捐助什么的，加油干吧。

We are trying to use it in ByteMD

It seems the size of text-bold is slightly different from other icons if we put them together (16x16):