iconfont-cli / flutter-iconfont-cli Goto Github PK
View Code? Open in Web Editor NEW在flutter中使用iconfont图标,不依赖字体,支持多色彩
License: MIT License
在flutter中使用iconfont图标,不依赖字体,支持多色彩
License: MIT License
生成 iconfont 文件时,希望增加一个属性控制透明度, fill-opacity
case IconNames.arrow_right_gray_s:
svgXml = '''
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path
d="M499.541333 222.72l258.986667 259.072a42.666667 42.666667 0 0 1 0 60.416L499.541333 801.194667A42.666667 42.666667 0 0 1 426.666667 771.072V252.928a42.666667 42.666667 0 0 1 72.874666-30.122667z"
fill="''' + getColor(0, color, colors, '#13131A') + '''"
fill-opacity=".3"
/>
</svg>
''';
break;
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.com/iconfont-flutter - Not found
npm ERR! 404
npm ERR! 404 'iconfont-flutter@latest' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404 1. name can only contain URL-friendly characters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
Dart的文件命名格式为 小写+下划线的形式。例如:aa_bb.dart , icon_font.dart
例如icon-test
的name被生成为icon_test
而且图标名称末尾的-
和_
会被删除
例如icon-test-
或者icon-test_
被生成为icon_test
这样在服务器返回字符串去匹配的时候就会失败
case '500_px':
iconName = IconNames.500_px;
break;
case '360':
iconName = IconNames.360;
break;
case 'w_3_school':
iconName = IconNames.w_3_school;
break;
遇到需要存储IconNames到本地的情况
改了一下模板
大概就是这样Iroha1024@e880c48
String serialize(): IconNames.iconName --> 'iconName'
额外提供getIconNames、供提前获取IconNames
话说readme没有引导说明,不太懂怎么进行本地调试的。还得手动tsc build,挪动文件进行测试😳
您好, 最近在使用字节提供的IconPark图标, 也支持js的导入方式. 但是导入图标后, 发现color和colors参数只能改变填充颜色, 无法修改图标的描边颜色(一直都是黑色的),
以下是图标对应的xml代码:
svgXml = '''
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
fill-opacity=".01"
fill="''' + getColor(0, color, colors, '#fff') + '''"
d="M0 0h48v48H0z"
/>
<path
stroke-linejoin="round"
stroke-width="4"
stroke="currentColor"
d="M10 6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H12a2 2 0 0 1-2-2V6Z"
data-follow-stroke="currentColor"
fill="''' + getColor(1, color, colors, '#333333') + '''"
/>
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="4"
stroke="currentColor"
d="M34 6v36M6 14h8M6 24h8M6 34h8M27 4h12M27 44h12"
data-follow-stroke="currentColor"
fill="''' + getColor(2, color, colors, '#333333') + '''"
/>
</svg>
''';
break;
因为是随机的情况,我无法提供标准重现代码,如下:
flutter3.7.0
flutter web
移动端浏览器
根据你的方式引入图标
能否让 参数color支持 Color类型 ?因为我定义了一组Color常量,场景比如,home页的图标切换,激活是app的主色,未激活是常量中的灰色。
const kSecondaryColor = Color(0xFF8B94BC);
// const kGreenColor = Color(0xFF6AC259);
const kGreenColor = Colors.green;
const kRedColor = Color(0xFFE92E30);
const kGrayColor = Color(0xFFC1C1C1);
const kBlackColor = Color(0xFF101010);
类似这样 使用
IconFont(IconNames.icon1,color:kSecondaryColor )
我看了生成的代码,是因为svg中不支持Color对象,只接受字符串类型。由于我是初学者,不知道怎么让Color对象转成String类型。
最后万分感谢作者开源这个库!!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.