Coder Social home page Coder Social logo

iconfont-cli / flutter-iconfont-cli Goto Github PK

View Code? Open in Web Editor NEW
84.0 4.0 16.0 164 KB

在flutter中使用iconfont图标,不依赖字体,支持多色彩

License: MIT License

Shell 2.66% Dart 75.21% JavaScript 3.61% TypeScript 18.52%
flutter iconfont fluttter-iconfont-svg iconfont-flutter flutter-iconfont

flutter-iconfont-cli's Issues

希望支持修改透明度 fill-opacity

生成 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;

npx iconfont-flutter 404

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.

添加icon序列化

遇到需要存储IconNames到本地的情况

改了一下模板
大概就是这样Iroha1024@e880c48

String serialize(): IconNames.iconName --> 'iconName'
额外提供getIconNames、供提前获取IconNames

话说readme没有引导说明,不太懂怎么进行本地调试的。还得手动tsc build,挪动文件进行测试😳

IconPark图标 颜色问题

您好, 最近在使用字节提供的IconPark图标, 也支持js的导入方式. 但是导入图标后, 发现color和colors参数只能改变填充颜色, 无法修改图标的描边颜色(一直都是黑色的),

image

以下是图标对应的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;

能否让 参数color支持 Color类型 ?

能否让 参数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类型。
最后万分感谢作者开源这个库!!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.