How to use @primer/octicons-react - 7 common examples

function RepoListItem({goal, stars}) {
  return (
    
      
        
          
          
            <p>{goal.title}</p>
            {stars &amp;&amp; (
              
                
                <p>{stars}</p>
              
            )}
          
        
      
      
        
          <label>TBD</label>
          <img src="{chevronRight}" alt="pointing right icon">
        
      
    
  );
}
export default RepoListItem;

export const NoteCard = () => (
  
    <textarea name="notes" for="" placeholder="{`Type" type="text" value="{&quot;&quot;}" style="{{minHeight:">    &lt;FlexCenter&gt;
      &lt;Button onClick={() =&gt; console.log("clicked")}&gt;
        &lt;Octicon verticalAlign="middle" icon={getIconByName("pencil")} /&gt;
        Edit Notes
      &lt;/Button&gt;
      &lt;Button primary onClick={() =&gt; console.log("clicked")}&gt;
        Delete
      &lt;/Button&gt;
    &lt;/FlexCenter&gt;
  &lt;/Card&gt;
);
</textarea>

onChange={_handleNotesChange}
        value={noteContent || ""}
        type="text"
        placeholder={`Type your notes for ${repoName} here...`}
        name="notes"
        aria-label="note input"
      />
      
        {editing ? (
          <button>
            
            Save Notes
          </button>
        ) : (
          <button>
            
            Edit Notes
          </button>
        )}
        <button>
          {" "}
          Delete
        </button>
      
    
  );
}

to={{
              pathname: `/repos/${goal.title}/${goal.number}`,
            }}>
            {goal.title}
          
        
        <p>{goal.description}</p>
        
          {goal.labels &amp;&amp;
            goal.labels.nodes.map(label =&gt; (
              <label>
                {label.name}
              </label>
            ))}
          <span>
            
            {stars}
          </span>
          <span>
            
            {contributors}
          </span>
        
      
    
  );
}
export default Card;

<p>{goal.description}</p>
        
          {goal.labels &amp;&amp;
            goal.labels.nodes.map(label =&gt; (
              <label>
                {label.name}
              </label>
            ))}
          <span>
            
            {stars}
          </span>
          <span>
            
            {contributors}
          </span>
        
      
    
  );
}
export default Card;

childStrings.forEach((val, key) => {
            if (!(typeof val === 'string') && LabelIcon.is(val)) {
                const octicon = getIconByName(val.name);
                if (octicon) {
                    children.push(<span></span>);
                } else {
                    children.push(<span></span>);
                }
            } else {
                children.push(<span>{val}</span>);
            }
        });
        const elementInnerDiv = {children};

)
}

CircleOcticon.defaultProps = {
  theme,
  ...Flex.defaultProps,
  size: 32
}

CircleOcticon.propTypes = {
  ...Flex.propTypes,
  icon: Octicon.propTypes.icon,
  size: PropTypes.number,
  theme: PropTypes.object
}

export default CircleOcticon