<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="221223" data-post-id="221223">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fceruti" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fceruti/120/28850_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fceruti
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group quote-modified" data-username="joshdcuneo" data-post="15" data-topic="41231">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/joshdcuneo/48/22297_2.png" class="avatar"> joshdcuneo:</div>
<blockquote>
<p>This (nice and short) book is a great way to learn more about macros though: <a href="https://pragprog.com/titles/cmelixir/metaprogramming-elixir/" rel="noopener nofollow ugc">Metaprogramming Elixir: Write Less Code, Get More Done (and Have Fun!) by Chris McCord </a></p>
</blockquote>
</aside>
<p>I’m about to finish this book, and it’s blowing my mind. Meta programming is <img src="https://forum.elixirforum.com/images/emoji/apple/exploding_head.png?v=15" title=":exploding_head:" class="emoji" alt=":exploding_head:" loading="lazy" width="20" height="20"></p>
<aside class="quote no-group" data-username="edisonywh" data-post="20" data-topic="41231">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/edisonywh/48/14709_2.png" class="avatar"> edisonywh:</div>
<blockquote>
<p>I wonder if it would be more reusable to use Phoenix’s <code>component</code> &amp; functional component API?</p>
</blockquote>
</aside>
<p>I’ll study this after nailing the compiling issues I’m facing. Thinking out loud here, I’d like the library to no have surface as dependency if you are not using it. Is that even possible? are there configurable dependencies?</p>
<p>–</p>
<p>Thanks to <a class="mention" href="/u/kip" rel="nofollow">@kip</a> and <a class="mention" href="/u/josevalim" rel="nofollow">@josevalim</a> for pointing out the way. I want to understand every line of code first, so I’m taking my time to study.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="221223" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-boxicon-a-component-library-that-wraps-the-boxicons-library-my-first-library/41231/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-221223" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="221223"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #21"></div>
  </section>
</div>
    <div class="postbit" id="221321" data-post-id="221321">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fceruti" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fceruti/120/28850_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fceruti
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>OK, so I managed to both finished the book and the library <img src="https://forum.elixirforum.com/images/emoji/apple/partying_face.png?v=15" title=":partying_face:" class="emoji" alt=":partying_face:" loading="lazy" width="20" height="20"></p>
<p>I added a way to load less functions using configuration</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">config :surface_boxicon,
  icons: [
    regular: ["calendar", "chvron-down"],
    solid: ["hand", "file-md"],
    logos: ["docker"]
  ]
</code></pre>
<p>But it turned out to be completely unnecessary, the Module is compiling super fast with all the icons. The current Boxicon module looks like this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule Boxicon
  ...

  def render(assigns) do
    ~F[&lt;svg xmlns="http://www.w3.org/2000/svg" width={"#{@size}"} height={"#{@size}"} class={"#{@class}"} viewBox="0 0 24 24"&gt;{render_content(@type, @name)}&lt;/svg&gt;]
  end

  for %Boxicon.Source{type: type, name: name, content: content} &lt;- @icons do
    defp render_content(unquote(Atom.to_string(type)), unquote(name)),
      do: unquote(Phoenix.HTML.raw(content))
  end

  defp render_content(_, _), do: ""

end
</code></pre>
<p>I’m not sure why this is the case, but maybe the compiler is having an easier time dealing with string signatures instead of maps. If I create one render function per icon, pattern matching on the assigns map, I go back to lousy compile times.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="221321" data-batch-url="/posts/batch_likers">
                        6
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-boxicon-a-component-library-that-wraps-the-boxicons-library-my-first-library/41231/23">Post #22</a>
	                </div>
	            </div>
              <div id="likers-container-221321" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="221321"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #22"></div>
  </section>
</div>
    <div class="postbit" id="234803" data-post-id="234803">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="fceruti" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/fceruti/120/28850_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  fceruti
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Since this thread was first published, I migrated my code from Surface to vanilla LiveView.</p>
<p>Here is a new package for everyone using <code>heex</code> files: <a href="https://github.com/timetask/boxicons-heex" rel="noopener nofollow ugc">Boxicons Heex</a></p>
<p>I think the API to use it, it’s pretty clever:</p>
<pre data-code-wrap="heex"><code class="lang-heex">      &lt;Box.icons
        type="regular"
        name="calendar"  
        size="64" 
        class="icon green"
      /&gt;
</code></pre>
<p>Have a nice day!</p>
<p>PS: It’s updated to use boxicons 2.1.1</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="234803" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/surface-boxicon-a-component-library-that-wraps-the-boxicons-library-my-first-library/41231/24">Post #23</a>
	                </div>
	            </div>
              <div id="likers-container-234803" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="234803"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>